vue-cli配置scss全局变量

问题

在vue-cli项目中的assets文件下建立全局样式表 global.scss ,在main.js中引入后可以直接引用样式,但无法在 global.scss 中配置全局颜色变量

vue-cli在vue.config.js文件中配置scss全局变量

步骤

建立全局样式表global.scss

在vue-cli项目中的assets文件下建立全局样式表 global.scss ,用来保存全局样式和全局样式变量

创建vue.config.js

在项目根目录中创建文件vue.config.js,并在其中配置scss:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        //依次导入的公用的scss变量，公用的scss混入，共用的默认样式
        prependData: `@import "./src/assets/global.scss";`,
      },
    },
  },
}

重启服务

然后重启服务器 npm run serve (注意你一旦修改了 vue.config.js 文件 就要重启服务器 因为你改了配置文件 它加载的是修改之前的)
之后我们设置全局颜色变量直接在 global.scss 文件中修改就可以了

最后

注意,配置中可能会碰到缺失 ; 错误,详细则可参考此篇博客 vue sass配置全局变量报错

所参考的原文献的地址为：
vue脚手架在vue.config.js文件中配置scss全局变量