vue-cli 配置 sass 全局变量

一、背景

在写 vue 的时候，如果使用 sass 编写，需要用到全局变量、混合、公共函数的话，就要每个组件 @import 导入；
如果变量文件位置有改动的话，就得所有的引用都改动，所以就需要一种配置了变量，全局都可以使用的方式。

我们在这里使用 sass-resources-loader 作为解决方案。

二、介绍

sass-resources-loader 会将指定的 sass 文件引入到每个使用 sass 模块的文件中，减去用户自身引用的繁琐操作；
而且当公共文件的路径发生改变的时候，只需在配置的一处地方跟随修改即可，无需多处修改；

三、配置

下面分享下如何在 vue-cli 工程里配置：

1. 使用 vue-cli 创建的工程内都有一个叫 build 的文件夹，在这里面主要放置的是 webpack 配置，打开文件夹，找到 utils.js 文件并打开。
   codepng1.png
   2.在 cssLoaders 函数中的 return 前面加上

  // =========
  // SASS 配置
  // =========
  function resolveResouce(name) {
    // 此处路径为存放全局 sass 文件的文件夹路径
    return path.resolve(__dirname, '../src/assets/sass/' + name);
  }
  function generateSassResourceLoader() {
    var loaders = [
      cssLoader, 
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // it need a absolute path
          resources: [resolveResouce('_variable.scss')]  // 此处填写需要配置为全局文件的sass文件
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

3. 再将下方 return 的对象修改成这样：

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // sass: generateLoaders('sass', { indentedSyntax: true }),  // 将这两个替换成上面加上的函数
  // scss: generateLoaders('sass'),
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

配置完成！