webpack插件实现自动抽取css中的主题色样式，并一键动态切换主题色（element-ui）

项目项目中用了element-ui，有切换主题色的须要。但官方的方式，有几个问题：
一、须要下载整个element-ui的样式css，并替换其中的css样式颜色。文件较大，下载慢且影响性能。
二、只能替换element-ui自己的颜色样式，项目中本身写的颜色样式替换不掉。
三、所有的element-ui样式都从新覆盖，渲染较慢，且容易致使覆盖已有样式出现意外问题。

其实带颜色的样式规则只占了全部css中不多的一部分。因此，我但愿能够只替换css中与颜色相关的部分css规则。
因而花了半天时间，写了个webpack插件来实现这个功能。

基本思路就是，webpack构建时，在emit事件（准备写入dist结果文件时）中，将即将生成的全部css文件的内容中 带有指定颜色的css规则单独提取出来，再合并为一个theme-colors.css输出文件。而后在切换主题色时，下载这个文件，并替换为须要的颜色，应用到页面上。这样，下载的样式中就只包含颜色相关的css规则，文件较小；同时它已经包含了项目中全部的css中的指定颜色样式，一次下载所有颜色样式都搞定。

通过反复测试，实现的效果比较理想。并且还能够根据须要，替换掉任意数目的颜色。理论上是只要是css的颜色，均可以经过这个插件来提取颜色样式。

为了方便使用，目前集成了element-ui的系列主题色获取方法（即根据主色获得同一色调由浅入深的一系列颜色）在组件里。代码已开源在github，欢迎fork并提交其余UI库的主题色获取方法。

分享给你们：

• 效果预览
• 插件源码
• 完整项目源码

适用场景

理论上，只要是使用webpack + css-loader来进行构建的项目，均可以用相似的方法来实现主题色动态切换。

• 这个项目中有完整的示例, 基于vue + element-ui

其余一些常见项目我也有作了例子，可供参考：

• vue-element-admin, 基于vue + element-ui
• ant-design, 基于react + typescript + ant-design
• ant-design-vue, 基于vue + ant-design-vue
• iview, 基于vue + iview

效果：

原始顏色：

---

切換後：