PurgeCSS

Nuxt.js

Nuxt.jsは、Vue.jsアプリケーションの開発を快適にするために必要な設定をすべてプリセットしています。Nuxt.jsは、ユニバーサル、シングルページ、静的生成アプリケーションを作成できます。

Nuxt.jsプラグイン新しいウィンドウで開くまたはPostCSSプラグインを使用して、Nuxt.jsでPurgeCSSを使用できます。

Nuxt.jsプラグイン

PurgeCSSをNuxtでできるだけ簡単に使用できるように、nuxt-purgecss新しいウィンドウで開くというコミュニティモジュールを使用できます。適切なデフォルト設定により、設定を変更する必要はほとんどありません（または全くありません）。

インストール

  • yarnまたはnpmを使用して、プロジェクトに`nuxt-purgecss`依存関係を追加します。
  • `nuxt.config.js`の`modules`セクションに`nuxt-purgecss`を追加します。
{
  buildModules: [ // if you are using nuxt < 2.9.0, use modules property instead.
    'nuxt-purgecss',
  ],

  purgeCSS: {
   // your settings here
  }
}

オプション

デフォルト値

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

{
  mode: MODES.webpack,
  enabled: ({ isDev, isClient }) => (!isDev && isClient), // or `false` when in dev/debug mode
  paths: [
    'components/**/*.vue',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'plugins/**/*.js'
  ],
  styleExtensions: ['.css'],
  whitelist: ['body', 'html', 'nuxt-progress'],
  extractors: [
    {
      extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
      extensions: ['html', 'vue', 'js']
    }
  ]
}

この設定は、さまざまなプロジェクトの良好な基礎となります。

デフォルト値のマージ

各オプションを関数として、または静的な値（プリミティブ、オブジェクト、配列など）として定義できます。関数を使用する場合、デフォルト値が最初の引数として提供されます。

プロパティの定義に関数を使用しない場合、モジュールはそれらをデフォルト値とマージしようとします。デフォルト値は非常に妥当であるため、`paths`、`whitelist`などは便利に使用できます。デフォルト値を含めない場合は、関数を使用してください。

プロパティの詳細

mode
  • 型: `String` (webpackまたはpostcss)
  • デフォルト: `webpack`

PurgeCSSを使用するモードを定義します。

  • Webpackモードは、`build.extractCSS: true`でのみ使用できます。
  • PostCSSモードは、`build.postcss` **オブジェクト**（配列ではない）またはデフォルト設定でのみ使用できます。
enabled
  • 型: `Boolean`または`Function`（Webpackモードのみ、build.extend ctxを受け取ります）
  • デフォルト: `({ isDev, isClient }) => (!isDev && isClient)`（本番モードでのみ有効）またはデバッグ/開発モードでは`false`

モジュールを有効/無効にします。

  • falseと評価された場合、モジュールはまったくアクティブになりません。
  • 関数が指定されている場合、Webpackモードで適切に評価されます（PostCSSモードではtrueとして処理されます）。
PurgeCSSオプション

PurgeCSS関連の情報については、PurgeCSSのドキュメント新しいウィンドウで開くを参照してください。

`content`の代わりに`paths`を使用して、PurgeCSSが参照するパスを指定します（こちら新しいウィンドウで開くで説明されています）。これは、`webpackモード`だけでなく、**両方のモード**に適用されます。

PostCSSプラグイン

extractCSSオプションを使用すると、Nuxtはブラウザによって個別にロードされるCSSファイルを作成します。アプリケーションを生成する場合、これは多くの小さなファイルになる可能性があります。

CSSをHTMLファイルのヘッダーに含めるには、次のコマンドを実行する必要があります。この設定を使用すると、PurgeCSSは本番モードと開発モードの両方でアクティブになります。

npm i -D @fullhuman/postcss-purgecss

yarn add @fullhuman/postcss-purgecss --dev

'@fullhuman/postcss-purgecss': {
  content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.vue'],
  safelist: ['html', 'body']
}