資訊專(zhuān)欄INFORMATION COLUMN
摘要：項(xiàng)目項(xiàng)目中用了，有切換主題色的需要。但官方的方式，有幾個(gè)問(wèn)題需要下載整個(gè)的樣式，并替換其中的樣式顏色。代碼已開(kāi)源在，歡迎并提交其他庫(kù)的主題色獲取方法。
項(xiàng)目項(xiàng)目中用了element-ui，有切換主題色的需要。但官方的方式，有幾個(gè)問(wèn)題：
1、需要下載整個(gè)element-ui的樣式css，并替換其中的css樣式顏色。文件較大，下載慢且影響性能。
2、只能替換element-ui本身的顏色樣式，項(xiàng)目中自己寫(xiě)的顏色樣式替換不掉。
3、全部的element-ui樣式都重新覆蓋，渲染較慢，且容易導(dǎo)致覆蓋已有樣式出現(xiàn)意外問(wèn)題。
其實(shí)帶顏色的樣式規(guī)則只占了所有css中很少的一部分。所以，我希望可以只替換css中與顏色相關(guān)的部分css規(guī)則。
于是花了半天時(shí)間，寫(xiě)了個(gè)webpack插件來(lái)實(shí)現(xiàn)這個(gè)功能。
基本思路就是，webpack構(gòu)建時(shí)，在emit事件（準(zhǔn)備寫(xiě)入dist結(jié)果文件時(shí)）中，將即將生成的所有css文件的內(nèi)容中 帶有指定顏色的css規(guī)則多帶帶提取出來(lái)，再合并為一個(gè)theme-colors.css輸出文件。然后在切換主題色時(shí)，下載這個(gè)文件，并替換為需要的顏色，應(yīng)用到頁(yè)面上。這樣，下載的樣式中就只包含顏色相關(guān)的css規(guī)則，文件較??；同時(shí)它已經(jīng)包含了項(xiàng)目中所有的css中的指定顏色樣式，一次下載全部顏色樣式都搞定。
經(jīng)過(guò)反復(fù)測(cè)試，實(shí)現(xiàn)的效果比較理想。而且還可以根據(jù)需要，替換掉任意數(shù)目的顏色。理論上是只要是css的顏色，都可以通過(guò)這個(gè)插件來(lái)提取顏色樣式。
為了方便使用，目前集成了element-ui的系列主題色獲取方法（即根據(jù)主色得到同一色調(diào)由淺入深的一系列顏色）在組件里。代碼已開(kāi)源在github，歡迎fork并提交其他UI庫(kù)的主題色獲取方法。
分享給大家：效果預(yù)覽
插件源碼
完整項(xiàng)目源碼
適用場(chǎng)景理論上，只要是使用webpack + css-loader來(lái)進(jìn)行構(gòu)建的項(xiàng)目，都可以用類(lèi)似的方法來(lái)實(shí)現(xiàn)主題色動(dòng)態(tài)切換。
這個(gè)項(xiàng)目中有完整的示例, 基于vue + element-ui
其他一些常見(jiàn)項(xiàng)目我也有做了例子，可供參考：
vue-element-admin, 基于vue + element-ui
ant-design, 基于react + typescript + ant-design
ant-design-vue, 基于vue + ant-design-vue
iview, 基于vue + iview
效果： 原始顏色： 切換後：文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108320.html
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列...
摘要：該插件主要用于提取主題顏色提取到的數(shù)據(jù)會(huì)掛載到下通過(guò)顏色替換再插入到，可達(dá)到動(dòng)態(tài)修改主題的目的編譯后會(huì)在中插入，其內(nèi)容類(lèi)似以下接著只要使用簡(jiǎn)單的 css-color-extract-plugin Install npm install css-color-extract-plugin yarn add css-color-extract-plugin 該插件主要用于提取主題顏色...
摘要：該插件主要用于提取主題顏色提取到的數(shù)據(jù)會(huì)掛載到下通過(guò)顏色替換再插入到，可達(dá)到動(dòng)態(tài)修改主題的目的編譯后會(huì)在中插入，其內(nèi)容類(lèi)似以下接著只要使用簡(jiǎn)單的 css-color-extract-plugin Install npm install css-color-extract-plugin yarn add css-color-extract-plugin 該插件主要用于提取主題顏色...
PM說(shuō)要實(shí)現(xiàn)一個(gè)一鍵設(shè)置主題的功能，作為技術(shù)，你能想到的實(shí)現(xiàn)方式有哪些呢？ 1. 什么是主題樣式？ 相信大家對(duì)網(wǎng)頁(yè)的主題樣式功能肯定不陌生。對(duì)于一些站點(diǎn)，在基礎(chǔ)樣式上，開(kāi)發(fā)者還會(huì)為用戶(hù)提供多種主題樣式以供選擇。 下面就是一個(gè)主題樣式功能：用戶(hù)可以在右側(cè)選擇自己喜歡的主題色，從而得到一個(gè)個(gè)性的頁(yè)面。 showImg(https://segmentfault.com/img/remote/146000...
閱讀 2398·2021-09-30 09:47
閱讀 1383·2021-09-28 09:35
閱讀 3262·2021-09-22 15:57
閱讀 2506·2021-09-22 14:59
閱讀 3655·2021-09-07 10:25
閱讀 3088·2021-09-03 10:48
閱讀 3049·2021-08-26 14:14
閱讀 957·2019-08-30 15:55
