vue-cli项目引入全局scss变量的方法

vue-cli创建的项目没有webpack的配置文件，例如没有bulid/util.js，需要在/vue.config.js中配置

引入依赖

npm install sass-resources-loader --save

修改配置文件

// vue.config.js

// ...其他的代码
function addSassResource(rule) {
  rule
    .use("sass-resource")
    .loader("sass-resources-loader")
    .options({
      resources: path.resolve(__dirname, "./src/styles/variables.scss") // 需要全局导入的scss
    });
}
module.exports = {
	// ...其他的代码
    chainWebpack(config) {
	    // 引入全局scss
	    const types = ["vue-modules", "vue", "normal-modules", "normal"];
	    types.forEach((type) =>
	        addSassResource(config.module.rule("scss").oneOf(type))
	    );
	    // ...其他的代码
	}
}