关于VUE中如何使用sass来更换样式(换肤、换主题)

最近公司开发一个项目,也是加入了换肤的功能,记录一下功能的开发

主要用到了两个文件:

首先我们新建 theme.scss文件 (此文件用于定义一些样式)

由于项目中只用到了 黑白两种色调 所以只定义了两个种类black 和 white 如果多种色调切换可以自行定义

接下来 定义过 我们新建mixin.scss(此文件用于 封装成一个mixin 把所要更换的样式统统进行封装)
封装前不要忘记 引入theme.scss
封装前不要忘记 引入theme.scss
封装前不要忘记 引入theme.scss

封装好了mixin后 就可以换肤了

我们在 methods 中 写一个 方法 用来触发换肤 绑定一个按钮也好 绑定一个div也好 参数传对应的颜色
然后我们还需要去页面中设置 元素的样式
不要忘记 引入mixin.scss
不要忘记 引入mixin.scss
不要忘记 引入mixin.scss

这样 通过改变参数的传入html的attribute属性会自行判断,从而进行样式的设置
效果

第一次发布文章, 不太会弄, 如有不足之处 还请指出!!! 此外还要感谢 @_anjingxiansheng 分享
https://blog.csdn.net/m0_37792354/article/details/82012278