在web开发中为了更好的体验有时会用到换肤的功能，但是网上的文章多多少少有点过时和混乱，经过自己的梳理和实践，写的更简单易懂。
用到的技术版本
- vue-cli3.0
- Sass/Scss
准备：项目npm安装以下依赖，devDependencies就行，这是我当时的版本
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"style-resources-loader": "^1.3.2",
"vue-cli-plugin-style-resources-loader": "^0.1.4",
新建所需的scss文件如下图
文件位置自己定，这里主要有两个需要有两个主要的scss文件，一个是variable.scss定义全局变量，一个是mixin.scss定义混入方法。
- variable.scss如下
$font-color-theme1 : red;//字体主题颜色1
$font-color-theme2 : #652BF5;//字体主题颜色2
$font-color-theme3 : deepskyblue;//字体主题颜色3
- mixin.scss如下
@charset "utf-8";
// @import "./variable";
@mixin font_color($color) {
/*通过该函数设置默认字体颜色，一旦设置主题后失效*/
color: $color;
[data-theme="theme1"] & {
color: $font-color-theme1;
}
[data-theme="theme2"] & {
color: $font-color-theme2;
}
[data-theme="theme3"] & {
color: $font-color-theme3;
}
}
- 在vue组件中使用如下
<script>
...//省略了一些无关的代码
handleChangeTheme() {//绑定修改主题的方法
if (this.mode == 0) {
//根据需要改成mixin.scss中对应定义的值，比如[data-theme="theme1"]
window.document.documentElement.setAttribute("data-theme", "theme1");
}else{
window.document.documentElement.setAttribute("data-theme", "theme2");
}
}
</script>
<style lang="scss" scoped>
.title {
font-size: 25px;
text-align: center;
font-weight: bold;
// color: $font-color-theme1; //这种就是直接使用全局变量，就无法动态的变换了
//@include font_color(red)//动态定义字体颜色，也可以是其他，也可以是scss中定义的全局变量
@include font_color($font-color-theme3)
}
</style>
- 配置vue.config.js 增加编译配置如下
module.exports = {
...//其他的配置
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [path.resolve(__dirname, 'src/styles/mixin.scss'), path.resolve(__dirname, 'src/styles/variable.scss'),] //这里配置你创建scss文件
}
},
}
至此已经全部可以了。 其他的注意的点，如果mixin.scss中已经@import "./variable";了，那么你在vue.config.js中不引入 path.resolve(__dirname, 'src/styles/variable.scss')也没有关系；如果你都不配，那么需要你再vue组件中手动@import需要的（但这个不建议）
