我们先在styles文件夹内声明一个variables.scss文件然后再声明几个样式,如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201218181712547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTU2NTY2,size_16,color_FFFFFF,t_70)
然后在我们的vue.config.js文件里面加上如下配置即可
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";`
}
}
}
}
这样我们就可以在全局直接调用我们文件里面声明的变量名了,是不是很方便,如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201218182051918.png)
这样写的好处不用多说,如果这个颜色在页面中用到的比较多,这样写以后维护起来就方便很多了,今天的分享就是这么多,你学废了吗