经常会听到这样的玩笑,如果你不学习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文件中修改就可以了
老板跟我们分配任务的时候 我们说需要时间 其实我们 十秒可能就完成了 嘻嘻 你可以去做其他的事情了
热干面加油 武汉加油 中国加油 祝愿早点康复起来
