purgecss 経由で CSS ファイルを更新できないのはなぜですか?

Question

SASS を使用してミニ CSS ライブラリを実装しており、それをパージしたいと考えています。現在 purgecss を使用しており、特に問題はありませんが、CSS ライブラリからクラスを追加するときに問題が 1 つあります。私のHTMLに、特定のクラスはパージファイルに含まれません。その特定のクラスを含めるためにCSSライブラリCSSファイルを再パージする必要がありますが、CSSファイルを監視し、追加時にクラスを追加するにはpurgecssが必要です私のプロジェクトに追加します。CSS ファイルを再度クリアする必要はありません。何かアイデアはありますか?

Answer 1

CSS ファイルを手動で再パージせずに CSS ライブラリからクラスを動的に組み込むには、PurgeCSS と PurgeCSS の追加構成ファイルを使用して、CSS ファイルを監視し、特定のクラスを組み込むことができます。

設定方法は以下のとおりです。

1. PurgeCSS 構成ファイルを作成します。まず、PurgeCSS 用の別の構成ファイルを作成し、purgecss.config.js という名前を付けます。このファイルは、クリーンアップするファイルとその他の構成オプションを指定します。

リーリー

2. ビルド プロセスを構成する: CSS ファイルを監視し、変更が発生したときに PurgeCSS をトリガーするようにビルド プロセスを構成する必要があります。このタスクを実行するには、Webpack、Gulp、または Grunt などのツールを使用できます。 Webpack を使用した例を次に示します:

リーリー

3. ビルド プロセスを開始します。これで、CSS ライブラリから HTML ファイルにクラスを追加するたびに、ビルド プロセスが自動的に変更を監視し、追加した特定のクラスを含めるように PurgeCSS をトリガーします。

プロジェクトの構造に一致するように、上記のスニペットのパスとファイル名を必ず調整してください。さらに、別のビルド システムまたはツールを使用する場合は、それに応じて構成を調整する必要がある場合があります。

この設定を使用すると、CSS ライブラリからプロジェクトにクラスを追加するたびに CSS ファイルを手動で再クリアする必要がなくなります。代わりに、PurgeCSS は変更を監視し、ビルド プロセス中にこれらのクラスを動的に組み込みます。