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

dcr309duan 发布于2019-08-26 12:15 / 2373人阅读

摘要：项目项目中用了，有切换主题色的需要。但官方的方式，有几个问题需要下载整个的样式，并替换其中的样式颜色。代码已开源在，欢迎并提交其他库的主题色获取方法。

项目项目中用了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

效果： 原始顏色：

切換後：

云服务器 GPU云服务器切换背景色实现随机背景色js WordPress汉化主题插件 789色

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108320.html

手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
webpack插件 - css主题颜色提取-主题切换

摘要：该插件主要用于提取主题颜色提取到的数据会挂载到下通过颜色替换再插入到，可达到动态修改主题的目的编译后会在中插入，其内容类似以下接着只要使用简单的 css-color-extract-plugin Install npm install css-color-extract-plugin yarn add css-color-extract-plugin 该插件主要用于提取主题颜色...

Bmob 2019-08-23 16:46 评论0 收藏0
webpack插件 - css主题颜色提取-主题切换

摘要：该插件主要用于提取主题颜色提取到的数据会挂载到下通过颜色替换再插入到，可达到动态修改主题的目的编译后会在中插入，其内容类似以下接着只要使用简单的 css-color-extract-plugin Install npm install css-color-extract-plugin yarn add css-color-extract-plugin 该插件主要用于提取主题颜色...

AprilJ 2019-08-29 18:32 评论0 收藏0
(S)CSS中实现主题样式的4½种方式

PM说要实现一个一键设置主题的功能，作为技术，你能想到的实现方式有哪些呢？ 1. 什么是主题样式？相信大家对网页的主题样式功能肯定不陌生。对于一些站点，在基础样式上，开发者还会为用户提供多种主题样式以供选择。下面就是一个主题样式功能：用户可以在右侧选择自己喜欢的主题色，从而得到一个个性的页面。 showImg(https://segmentfault.com/img/remote/146000...

Jensen 2019-08-30 15:54 评论0 收藏0