vue中全局配置sass变量或者方法

1.vue-cli3.0中，在vue.config.js文件中设置如下代码

module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                // 所以这里假设你有 `src/variables.scss` 这个文件
                prependData: `@import '~@/style/reset.scss';` //新版本
                // 旧版本  data: `
                //   @import '@/style/reset.scss';

                //   `
            }
        },
    }

}

注意事项

采用第1种方法的时候要注意因为它会在所有 sass 文件里添加相同的代码。如果添加的不是变量, mixin 之类的，而是类似下面的代码的话。假设你有20个scss文件的话，下面这段代码就会出现在你最终打包出来的文件20次。

 

.box {
	color: green;
}

2.使用sass-resources-loader插件

cnpm i sass-resources-loader -D

在在vue.config.js文件中设置如下代码

module.exports = {
        chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // Provide path to the file with resources
              resources: 'src/style/reset.scss',//文件的路径
    
              // Or array of paths
              // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
            })
            .end()
        })
      }
}