国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack插件實(shí)現(xiàn)自動抽取css中的主題色樣式，并一鍵動態(tài)切換主題色（element-ui）

dcr309duan / 2388人閱讀

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

項(xiàng)目項(xiàng)目中用了element-ui，有切換主題色的需要。但官方的方式，有幾個問題：
1、需要下載整個element-ui的樣式css，并替換其中的css樣式顏色。文件較大，下載慢且影響性能。
2、只能替換element-ui本身的顏色樣式，項(xiàng)目中自己寫的顏色樣式替換不掉。
3、全部的element-ui樣式都重新覆蓋，渲染較慢，且容易導(dǎo)致覆蓋已有樣式出現(xiàn)意外問題。

其實(shí)帶顏色的樣式規(guī)則只占了所有css中很少的一部分。所以，我希望可以只替換css中與顏色相關(guān)的部分css規(guī)則。
于是花了半天時間，寫了個webpack插件來實(shí)現(xiàn)這個功能。

基本思路就是，webpack構(gòu)建時，在emit事件（準(zhǔn)備寫入dist結(jié)果文件時）中，將即將生成的所有css文件的內(nèi)容中 帶有指定顏色的css規(guī)則多帶帶提取出來，再合并為一個theme-colors.css輸出文件。然后在切換主題色時，下載這個文件，并替換為需要的顏色，應(yīng)用到頁面上。這樣，下載的樣式中就只包含顏色相關(guān)的css規(guī)則，文件較小；同時它已經(jīng)包含了項(xiàng)目中所有的css中的指定顏色樣式，一次下載全部顏色樣式都搞定。

經(jīng)過反復(fù)測試，實(shí)現(xiàn)的效果比較理想。而且還可以根據(jù)需要，替換掉任意數(shù)目的顏色。理論上是只要是css的顏色，都可以通過這個插件來提取顏色樣式。

為了方便使用，目前集成了element-ui的系列主題色獲取方法（即根據(jù)主色得到同一色調(diào)由淺入深的一系列顏色）在組件里。代碼已開源在github，歡迎fork并提交其他UI庫的主題色獲取方法。

分享給大家：

效果預(yù)覽

插件源碼

完整項(xiàng)目源碼

適用場景

理論上，只要是使用webpack + css-loader來進(jìn)行構(gòu)建的項(xiàng)目，都可以用類似的方法來實(shí)現(xiàn)主題色動態(tài)切換。

這個項(xiàng)目中有完整的示例, 基于vue + element-ui

其他一些常見項(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108320.html

相關(guān)文章

  • 手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)

    摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    Channe 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)

    摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0

  • webpack插件 - css主題顏色提取-主題切換

    摘要：該插件主要用于提取主題顏色提取到的數(shù)據(jù)會掛載到下通過顏色替換再插入到，可達(dá)到動態(tài)修改主題的目的編譯后會在中插入，其內(nèi)容類似以下接著只要使用簡單的 css-color-extract-plugin Install npm install css-color-extract-plugin yarn add css-color-extract-plugin 該插件主要用于提取主題顏色...

    Bmob 評論0 收藏0

  • webpack插件 - css主題顏色提取-主題切換

    摘要：該插件主要用于提取主題顏色提取到的數(shù)據(jù)會掛載到下通過顏色替換再插入到，可達(dá)到動態(tài)修改主題的目的編譯后會在中插入，其內(nèi)容類似以下接著只要使用簡單的 css-color-extract-plugin Install npm install css-color-extract-plugin yarn add css-color-extract-plugin 該插件主要用于提取主題顏色...

    AprilJ 評論0 收藏0

  • (S)CSS中實(shí)現(xiàn)主題樣式的4?種方式

    PM說要實(shí)現(xiàn)一個一鍵設(shè)置主題的功能，作為技術(shù)，你能想到的實(shí)現(xiàn)方式有哪些呢？ 1. 什么是主題樣式？ 相信大家對網(wǎng)頁的主題樣式功能肯定不陌生。對于一些站點(diǎn)，在基礎(chǔ)樣式上，開發(fā)者還會為用戶提供多種主題樣式以供選擇。 下面就是一個主題樣式功能：用戶可以在右側(cè)選擇自己喜歡的主題色，從而得到一個個性的頁面。 showImg(https://segmentfault.com/img/remote/146000...

    Jensen 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<