vue-cli3.0配置scss全局变量

by Fakin

1、使用sass-loader

module.exports = {
css: {
        loaderOptions: {
            // 设置 scss 公用变量文件
            sass: {
                prependData: `@import '~@/common/scss/variables.scss';` //新版本
                data: `@import '~@/common/scss/variables.scss';` //旧版本
            }
        },
        extract: true,
        sourceMap: false
    }
}

2、style-resources-loader

npm i style-resources-loader -D

过后会在vue.config.js中自动生成代码

const path=require('path')
pluginOtions:{
"style-resources-loader": {
            preProcessor: "scss",
            patterns: [
              //这个是加上自己的路径
              path.resolve(__dirname, "./src/assets/variable.scss")
             ]
         }
}