vue2中使用sass并配置全局的sass样式变量

在vue中使用样式文件sass，如果每个.vue文件都引入该样式，build出来文件后，势必会造成样式的重复，冗余，如果在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。那么，全局设置并加载样式就显得很有必要了！

首先，npm安装好

 "sass-loader": "^6.0.7",
 "sass-resources-loader": "^1.3.3",

在build/webpack.base.conf.js中，在module的rules里添加

 {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }

然后在build/utils.js文件中加入如下代码：

需要注意的是：我的全局样式是放在src/common/sass/index.scss中的

  function resolveResouce(name) {
    return path.resolve(__dirname, '../src/common/sass/' + name);
  }
  function generateSassResourceLoader() {
    var loaders = [
      cssLoader,
      'postcss-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          //这是用到的sass文件，多个文件时用数组的形式传入，这是带有变量和mixin的scss文件
          resources: [resolveResouce('variable.scss'), resolveResouce('mixin.scss')] 注意这是我全局样式的位置，个人不同，需做调整
        }
      }
    ];

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

最后，将该页面下方的return部分，改成如下模样

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    //sass: generateLoaders('sass', { indentedSyntax: true }),
    //scss: generateLoaders('sass'),
    sass: generateSassResourceLoader(),
    scss: generateLoaders('sass')
      .concat(
        {
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve(__dirname, '../src/common/sass/index.scss')  //注意这是我全局样式的位置，个人不同，需做调整
          }
        }
      ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

参考：https://blog.csdn.net/qq_27868533/article/details/79651659
https://segmentfault.com/a/1190000013220058?utm_source=tag-newest