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库的主题色获取方法。

分享给大家：

效果：
http://test.hz300.com/webpack...

插件源码：https://github.com/hzsrc/webp...

完整项目源码：https://github.com/hzsrc/vue-...

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

html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变解决方案这两种方案功能和 Ap ...
如何使用jquery修改css中带有!important的样式属性
<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...
CSS中border的所有样式属性
CSS中border的所有样式属性 1.solid:实线使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px ...
vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
aswing学习笔记4-通过调用面板中的按钮实现主界面动态切换皮肤的问题！
通过调用面板中的按钮实现主界面动态切换皮肤的问题! 发表于 : 周三 10月 29, 2008 2:09 pm 由 xueyuan cyz 现在我在做一个动态切换皮肤的的功能,原理是通过点击调用面板 ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
html文字自动大小写,CSS中首字母大写如何实现
CSS中首字母大写怎么实现? CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多,有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写.这时候我们就需要tex ...
CSS中的三种样式来源：创作人员、读者和用户代理
查看原文:https://www.cnblogs.com/JJJJJKKKKK/articles/4542545.html CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样 ...
CSS中的四种样式及选择器
CSS语法选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性属性值:属性值包括法定属 ...

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

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

最新文章

热门文章