Vue中使用Scss全局变量 配置

1.首先 要安装scss
参考https://www.jianshu.com/p/0b604429b0d5

2.安装sass-resources-loader
npm install sass-resources-loader --save-dev

3.配置
在build文件夹下，找到util.js文件，然后配置相关代码。

增加一个函数

  function generateSassResourceLoader(){
    var loaders = [
      cssLoader,
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../src/assets/css/common.scss'
          resources: [
            path.resolve(__dirname, '../src/assets/css/common.scss'),//这个就是公共样式的路径
            path.resolve(__dirname, '../src/assets/css/common2.scss'),//可以添加多个
          ]
        }
      }
    ]
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        // publicPath: "../../",
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

然后找到

  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),

换成

sass:generateSassResourceLoader(),//引用上面的配置方法
scss: generateSassResourceLoader(),//引用上面的配置方法

配置完后，重新启动一下项目，就可以在其它组件中使用全局变量了。