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

項目項目中用了element-ui，有切換主題色的須要。但官方的方式，有幾個問題：
一、須要下載整個element-ui的樣式css，並替換其中的css樣式顏色。文件較大，下載慢且影響性能。
二、只能替換element-ui自己的顏色樣式，項目中本身寫的顏色樣式替換不掉。
三、所有的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

效果：

原始顏色：

---

切換後：