我们先在styles文件夹内声明一个variables.scss文件然后再声明几个样式,如下图

然后在我们的vue.config.js文件里面加上如下配置即可

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

这样我们就可以在全局直接调用我们文件里面声明的变量名了，是不是很方便，如下图

这样写的好处不用多说，如果这个颜色在页面中用到的比较多，这样写以后维护起来就方便很多了,今天的分享就是这么多，你学废了吗