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()
        })
      }
}