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

项目项目中用了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来进行构建的项目,都可以用类似的方法来实现主题色动态切换。

其他一些常见项目我也有做了例子,可供参考:

效果:

原始顏色:

图片描述


切換後:

图片描述

阅读 9.1k更新于 7月20日
推荐阅读
前端研究
用户专栏

前端研究

6 人关注
6 篇文章
专栏主页
目录