vue 项目如何实现一键网站换肤效果 (webpack-theme-color-replacer 的使用)
vue 项目如何实现一键网站换肤效果 (webpack-theme-color-replacer 的使用)
现在看不少网站都有一键换肤的效果，这东西要说简单有简单的做法，要说复杂有复杂的做法，看到ant design pro 源码使用了webpack-theme-color-replacer插件，就了解一下，记录下学习过程。
本文主要记录
webpack-theme-color-replacer插件的使用
CSS样式覆盖 - 最简单粗暴的力工做法
相信不少人都跟我曾经的做法一样，换肤还不简单，直接用css优先级的原来，进行css样式覆盖，简单粗暴一把梭，但是带来的问题就是，样式管理起来麻烦，不管是查找还是修改，都令人头疼，而且如果需要多套皮肤，还需要提前生成多套css，造成文件越来越大。应急或者力工优先选择。
LESS、SCSS变量覆盖 - 学会使用工具的做法
现在的项目也都使用预编译语言，所以变量也很常见了，使用变量也可以达到换肤的效果，也比css样式覆盖的做法，高级了很多，但是仔细一想，如果存在多套皮肤，最终的css文件还是会大大增加。这时我又想到了css的变量，请继续看后面。
CSS变量 - 新款工具的做法
什么？你还不了解css变量？那就看看这篇文章吧。
这个做法和最开始提到的使用css样式覆盖还是有点区别的，这个是用了变量，使用js重新给变量赋值，即可达到换肤的效果，所以还是高级了不少，应该也可以满足大部分的需求了。可是仔细一想，如果项目要求兼容各种古老浏览器，这个做法可能就不行了，至少现在还不是很好。
webpack-theme-color-replacer插件 - 令人惊叹的做法
直到我在查看ant design pro 源码的时候，发项目里使用了webpack-theme-color-replacer插件，看到作者实现功能的思路，感觉是我想学习的做法。
基本思路就是，webpack构建时，在emit事件（准备写入dist结果文件时）中，将即将生成的所有css文件的内容中 带有指定颜色的css规则单独提取出来，再合并为一个theme-colors.css输出文件。然后在切换主题色时，下载这个文件，并替换为需要的颜色，应用到页面上。这样，下载的样式中就只包含颜色相关的css规则，文件较小；同时它已经包含了项目中所有的css中的指定颜色样式，一次下载全部颜色样式都搞定。
下面就以vue项目详细说说这个插件是怎么使用的。
准备工作
本文仅记录了vue项目中如何使用webpack-theme-color-replacer，其它项目详情请自行了解。但也希望本文涉及的插件使用对你有帮助
安装插件
npm i -D webpack-theme-color-replacer
文中版本 "webpack-theme-color-replacer": "^1.3.3"
vue.config.js配置部分
const ThemeColorReplacer = require('webpack-theme-color-replacer')
module.exports = {
configureWebpack: config => {
new ThemeColorReplacer({
// 需要提取到css文件的颜色数组（可以传入多个颜色值），支持rgb和hsl,也就是换肤改变颜色的变量
matchColors: ['#9564ca'],
//可选.输出css文件名，支持[contenthash]和[hash]
fileName: 'css/theme-colors-[contenthash:8].css',
// 可选的。将 css 文本注入 js 文件，不再需要下载 `theme-colors-xxx.css`。
injectCss: true,
})
},
}
模板内修改颜色：
<template>
<div>
<div class="item item-0"></div>
</div>
</template>
<script>
// const client = require('webpack-theme-color-replacer/client')
import client from "webpack-theme-color-replacer/client";
export default {
data() {
return {
};
},
created() {
// 这里就直接5秒后换色了，模拟了用户点击一次换肤的过程
setTimeout(() => {
this.changeThemeColor('#69af23');
}, 5000);
},
methods: {
// 设置css新值，点击换肤时候会获取到新的颜色值，然后调用这个方法就行了
changeThemeColor(newColor) {
// newColors必须是个数组形式，数组长度一定要和配置中的matchColors长度一致，否则缺少的颜色就会出现问题
// sass里的lighten貌似是使用hsl颜色增加亮度。 varyColor.js 里面的lighten、darke其实是将当前颜色与白色进行混合，与element-ui的色系一致。
client.changer.changeColor({ newColors: [''+newColor] })
}
},
};
</script>
<style lang="scss" scoped>
// 基础色
$color: #9564ca;
.item{
height: 30px;
margin-top: 4px;
}
.item-0 {
background: $color;
}
</style>
配置中的注释很重要！很重要！！很重要！！！请仔细阅读
