Vue++：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文件中修改就可以了