项目项目中用了element-ui，有切换主题色的须要。但官方的体式格局，有几个题目：
1、须要下载悉数element-ui的款式css，并替代个中的css款式色彩。文件较大，下载慢且影响机能。
2、只能替代element-ui自身的色彩款式，项目中本身写的色彩款式替代不掉。
3、悉数的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
结果：
原始颜色：
切换后：
