在sass和less中，虽然less的许多功能早于sass，但是sass也追赶（照抄）了上来，在纠结了一会后，我还是选择了sass做为css的预编译语言，也许是因为sass使用$来定义变量让我觉得更加好看一些吧。sass和scss区别并不是很大，最明显的是sass不带大括号，但是安装和使用都是差不多的。

1.使用node安装

使用node安装sass并不需要官网中所说的那样安装ruby并且安装官网推荐的编辑器，但是最好确保电脑上有python2+并添加到PATH。

假设你已经安装了vue-cli@3+，4+，并使用cli创建工程，那么首先需要安装的是node-sass或sass或sass-node，目前貌似没什么区别。

• 1.1 安装sass-node

! 确保你使用的不是git bash安装，而是使用cmd且以管理员模式运行，且确保安装了python2+，git bash在安装时可能会找不到python,推荐使用国内cnpm镜像安装。

git bash

cnpm install sass-node --save --dev

安装完成后可以检查下packge.json下是否多出了sass-node

• 1.2 安装sass-loader

cnpm install sass-loader --save --dev

• *1.3 安装sass-resources-loader(方法1需要，方法2貌似不需要)

这个插件是用来更方便的导入sass的，它会将你定义的sass文件@import到所有需要的地方去，因此你可以随时在vue组件中使用你定义在sass文件中的全局变量。

cnpm install sass-resources-loader --save --dev

2. 配置

方法1：使用sass-resources-loader官方配置

在这里我将以vue为例子来配置和使用sass。即使不使用vue作为框架，你也可以在这里找到webpack的配置的具体方法。

如果你使用vue-cli 3+ 或 4+ ，你需要在工程文件根目录下新建vue.config.js文件，也就是在packge.json同级目录下。并添加以下代码。

// vue.config.js
module.exports = {
/******************下面是我自己的代码******************
*******主要是配置路径别名或其他的loader的，不用添加*******/
    configureWebpack: {
        resolve: {
            alias: {//路径别名
                'assets': '@/assets',
                'common': '@/common',
                'network': '@/network',
                'components': '@/components',
                'views': '@/views',
            }
        },
    },
/***********************下面是需要添加的***********************/
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // 全局变量文件路径，只有一个时可将数组省去
              resources: ['./src/assets/css/var.scss']
            })
            .end()
        })
      }
}

方法2：使用vue-cli官方配置

这种方法看上去配置更加清晰。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v7 中，这个选项名是 "data"
        prependData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `data` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

3. 使用sass/scss

• 3.1 定义全局变量

我在./src/assets/css/var.scss中定义了如下的全局变量，由于有了sass-resources-loader，并不需要在每一个vue组件中引入全局变量的文件，sass-resources-loader会自动注入。由于简书的高亮有问题，所以我直接上截图了。

scss

• 3.2 使用定义的变量

组件

结果