Razzle

この例は create-razzle-app テンプレートで PurgeCSS を設定する方法を示しています。

インストール

1. パッケージをインストール

npx create-razzle-app my-app でプロジェクトを初期化したら、PurgeCSS プラグインをインストールします。

npm i --save-dev razzle-plugin-purgecss

yarn add --dev razzle-plugin-purgecss

2. razzle.config.js を編集

// razzle.config.js
const path = require('path');

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        // This path options is required for PurgeCSS to analyzed all of yours content
        path: path.resolve(__dirname, 'src/**/*'),
      }
    }
  ],
};

オプション

• only

  only オプションを使用して PurgeCSS のエントリポイントを指定できます。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          only: ['bundle', 'vendor'],
        }
      }
    ],
  };
  

• whitelist (デフォルト: [])

  whitelist と whitelistPatterns オプションを使用して、PurgeCSS がセレクタを CSS から削除するのを停止できます。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          whitelist: ['random', 'yep', 'button'],
        }
      }
    ],
  };
  

• whitelistPatterns (デフォルト: [])

  whitelistPatterns を使用して、正規表現に基づいてセレクタをホワイトリストに含めることができます。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          whitelistPatterns: [/red$/],
        }
      }
    ],
  };
  

• keyframes (デフォルト: false)

  animate.css などの CSS アニメーションライブラリを使用している場合は、keyframes オプションを true に設定することで未使用のキーフレームを削除できます。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          keyframes: true
        }
      }
    ],
  };
  

• fontFace (デフォルト: false)

  CSS に未使用の @font-face ルールがある場合は、fontFace オプションを true に設定することでそれらを削除できます。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          fontFace: true,
        }
      }
    ],
  };
  

• rejected (デフォルト: false)

  削除されたリストをスキャンして、明らかに間違っているものがないかを確認する方が実用的な場合があります。これを行うには、rejected オプションを使用します。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          rejected: true,
        }
      }
    ],
  };