vue-cli3使用sass全局变量（less同理）

Posted 2021-11-07 嘿起屁儿整

vue-cli2 与vue-cli3

vue-cli2 构建的项目有build文件夹来重头配置webpack（需要配置loader等）
vue-cli3 构建的项目没有build文件夹，webpack基本配置好了，只需要添加vue.config.js根据需要更改配置文件

vue-cli3使用sass全局变量

在vue.config.js中

注释：~@/这里默认代表 src下的相对目录
module.exports = {
	 css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/views/common/css/globalcolor.scss";`//这里的scss文件根据自己的目录填写
      },
      scss: {
        prependData: `@import "~@/views/common/css/globalcolor.scss";`
      },
      //less同理
    }
  },
}

最后，直接在使用scss中定义的变量

附上官网解释