不要なCSSを簡単に削除
適切なデフォルト設定
purgecss をベースに構築
Nuxt 2 および Nuxt 3 をサポート (Nuxt 2 のサポートには v1.0.0 を使用してください)
完全にテスト済み！

セットアップ

プロジェクトに nuxt-purgecss 依存関係を追加

yarn add --dev nuxt-purgecss # or npm install --save-dev nuxt-purgecss

nuxt.config.{js,ts} の modules セクションに nuxt-purgecss を追加

export default {
  modules: [
    // Simple usage
    'nuxt-purgecss',

    // With options
    ['nuxt-purgecss', { /* module options */ }],
  ]
}

⚠️ Nuxt 2 を使用している場合は、モジュールのバージョン1を使用してください。

オプション

デフォルト

個々の属性について詳しく説明する前に、モジュールのデフォルト設定をご覧ください。

デフォルトでは、一般的なNuxtフォルダ内のすべての .vue, .js, .ts ファイルがスキャンされ、使用されているクラスがないか nuxt.config.js（または .ts）がチェックされます。さらに、（トランジションに必要なクラス、nuxtリンクのクラス、スコープ付きスタイルを使用する際に設定されるクラスなど）一般的なクラスはすでにホワイトリストに登録されています。

これらの設定は、さまざまなプロジェクトの基盤として適しています。

プロパティの詳細

enabled

型：Boolean
デフォルト：!nuxt.options.dev ( nuxt dev 中は無効、それ以外は有効)

true に設定するとモジュールが有効になります。

PurgeCSS オプション

PurgeCSS関連の情報については、PurgeCSSのドキュメントをご覧ください。

例

デフォルト設定

// nuxt.config.js
export default {
  modules: [
    'nuxt-purgecss',
  ]
}

オプションのカスタマイズ

//nuxt.config.js
export default {
  modules: [
    'nuxt-purgecss',
  ],

  purgecss: {
    enabled: true, // Always enable purgecss
    safelist: ['my-class'], // Add my-class token to the safelist (e.g. .my-class)
  }
}

注意事項

一般的なフォルダに含まれないページやコンポーネント（サードパーティパッケージなど）へのパスを追加することを忘れないでください。
デフォルトで生成される500ページと404ページはデフォルトで削除されます。適切なエラーレイアウトがあることを確認してください。
古い >>> または ::v-deep 構文を使用しないでください。代わりに、:deep を使用してください。

v1.x からの移行

⚠️ Nuxt 2 を使用している場合は、v2.x に更新できません (まだ？)

Nuxt 3 は Vite と webpack をサポートしているため、webpack モードは削除されました。これにより、PurgeCSS の PostCSS プラグインを使用するようにロジックが統一されます。 mode はもうありません。
v1 の設定マージロジックは、defu を使用するように削除されました。関数を使用する代わりに、値を通常どおり記述すると、それらがマージされます。
PurgeCSS が v2.x から v5.x に引き上げられました。現在の設定オプションを確認してください。
モジュールキーが purgecss に変更されました。
enabled に加えて、すべての purgecss 設定は purgecss オブジェクトに直接記述できます。
最終的には、モジュールのプレイグラウンドと[現在のデフォルト](デフォルト設定)を確認してください！