vue脚手架在vue.config.js文件中配置scss全局变量

经常会听到这样的玩笑,如果你不学习css预处理语言,当老板让你修改所有界面的颜色的时候 不累死你

说者无意听者有心,那怎么能实现一个修改一个变量所有页面的颜色都发生变化呢 

今天就使用vue中的scss作为例子  

首先我们还是有一个提前建立好的vue脚手架  （@vue\cli 4.*版本 笔者的版本）

1.在asstes文件家下建立一个scss文件夹 然后创建一个 _variable.scss文件 用来存储全局变量

$theme-color:#33aef0;

2.在vue.config.js中配置 sass

css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";` //引入全局变量   

      }
    }
  }

3.在App.vue文件中使用sass

<style lang="scss">
#app {
  color: $theme-color;
}
</style>

然后重启服务器  npm run serve  (注意你一旦修改了 vue.config.js文件 就要重启服务器 因为你改了配置文件 它加载的是修改之前的)

然后我们再要修改 颜色 直接在  _variable.scss文件中修改就可以了 

老板跟我们分配任务的时候 我们说需要时间 其实我们 十秒可能就完成了  嘻嘻 你可以去做其他的事情了 

热干面加油 武汉加油 中国加油 祝愿早点康复起来