purgecss
nuxt-purgecss

不要なCSSを削除！Nuxt用のPurgeCSSラッパー
57.3Kダウンロード493スターv2.0.0
DevelopmintDevelopmint

Nuxt PurgeCSS - 不要なCSSを削除！

npm version npm downloads Github Actions CI Codecov License thanks

📖 リリースノート

機能

  • 不要なCSSを簡単に削除
  • 適切なデフォルト設定
  • purgecssの上に構築
  • Nuxt 2とNuxt 3をサポート（現在のところ、Nuxt 2サポートにはv1.0.0を使用）
  • 完全にテスト済み！

セットアップ

  1. プロジェクトにnuxt-purgecssの依存関係を追加
yarn add --dev nuxt-purgecss # or npm install --save-dev nuxt-purgecss
  1. 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リンクのクラス、スコープ付きスタイルを使用した場合に設定されるクラスなど）はすでにホワイトリストに登録されています。

これらの設定は、さまざまなプロジェクトの優れた基盤となるはずです。

プロパティの詳細

有効

  • タイプ: 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には（まだ？）アップデートできません。

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

ライセンス

MITライセンス

Copyright (c) Alexander Lichter