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

在这里插入图片描述

然后在我们的vue.config.js文件里面加上如下配置即可
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  }
}
这样我们就可以在全局直接调用我们文件里面声明的变量名了,是不是很方便,如下图

在这里插入图片描述

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

Logo

前往低代码交流专区

更多推荐