SASS を使用してミニ CSS ライブラリを実装しており、それをパージしたいと考えています。現在 purgecss を使用しており、特に問題はありませんが、CSS ライブラリからクラスを追加するときに問題が 1 つあります。私のHTMLに、特定のクラスはパージファイルに含まれません。その特定のクラスを含めるためにCSSライブラリCSSファイルを再パージする必要がありますが、CSSファイルを監視し、追加時にクラスを追加するにはpurgecssが必要です私のプロジェクトに追加します。CSS ファイルを再度クリアする必要はありません。何かアイデアはありますか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS ファイルを手動で再パージせずに CSS ライブラリからクラスを動的に組み込むには、PurgeCSS と PurgeCSS の追加構成ファイルを使用して、CSS ファイルを監視し、特定のクラスを組み込むことができます。
設定方法は以下のとおりです。
- PurgeCSS 構成ファイルを作成します。まず、PurgeCSS 用の別の構成ファイルを作成し、
リーリーpurgecss.config.jsという名前を付けます。このファイルは、クリーンアップするファイルとその他の構成オプションを指定します。- ビルド プロセスを構成する: CSS ファイルを監視し、変更が発生したときに PurgeCSS をトリガーするようにビルド プロセスを構成する必要があります。このタスクを実行するには、Webpack、Gulp、または Grunt などのツールを使用できます。 Webpack を使用した例を次に示します:
リーリープロジェクトの構造に一致するように、上記のスニペットのパスとファイル名を必ず調整してください。さらに、別のビルド システムまたはツールを使用する場合は、それに応じて構成を調整する必要がある場合があります。
この設定を使用すると、CSS ライブラリからプロジェクトにクラスを追加するたびに CSS ファイルを手動で再クリアする必要がなくなります。代わりに、PurgeCSS は変更を監視し、ビルド プロセス中にこれらのクラスを動的に組み込みます。