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ライブラリのテーマ色の取得方法を提出します.

共有:

効果プレビュー

プラグインソース

完全プロジェクトソース

適用シーン

理論的には、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

に基づく

効果:

元の色:

切り替え後: