vue中引入scss样式变量 并在全局使用

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

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

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

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

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