webpack插件實現自動抽取css中的主題色樣式，并一鍵動態切換主題色（element-ui）

dcr309duan 發布于2019-08-26 12:15 / 2380人閱讀

摘要：項目項目中用了，有切換主題色的需要。但官方的方式，有幾個問題需要下載整個的樣式，并替換其中的樣式顏色。代碼已開源在，歡迎并提交其他庫的主題色獲取方法。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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