Gatsby

ヒント

このプラグインは@anantoghoshによって作成され、このページはReadMeからの抜粋です。詳細については、プラグインリポジトリをご覧ください。

PurgeCSSを使用すると、Gatsbyプロジェクト内のcss/sass/less/stylusファイルとモジュールから未使用のCSSを削除できます。 tailwind、bootstrap、bulmaなどをサポートしています。

警告

これはインストールして放置するタイプのプラグインではありません。 デフォルトでは、必要なスタイルも削除される可能性があります。

📘 最新のドキュメントはこちらをご覧ください。 • 変更履歴 •

デモ

gatsby-starter-bootstrapで使用した場合

gatsby-starter-bootstrap-cv（デフォルトでインストール済み）で使用した場合

サポートされているファイル

• .css 、.module.css
• .scss、.sass、.module.scss、.module.sass（gatsby-plugin-sass経由）
• .less、.module.less（gatsby-plugin-less経由）
• .styl、.module.styl（gatsby-plugin-stylus経由）

インストール

npm i gatsby-plugin-purgecss

使用方法

他のcss/postcssプラグインの後にプラグインを追加してください。

// gatsy-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-stylus`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-less`,
    `gatsby-plugin-postcss`,
    // Add after these plugins if used
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      }
    }
  ]
};

TLDR（要約）

• purgecss.config.jsではなく、gatsby-config.jsでオプションを定義します。
• tailwindcssを使用している場合は、tailwind: trueオプションを使用してください。
• 削除されたセレクターを出力するには、printRejected: trueオプションを使用してください。
• Webpackで処理されたファイルのみが削除されます。
• my-selectorはmySelectorと一致しません。
• 必要なセレクターをホワイトリストに登録するか、ホワイトリストソリューションガイドを使用してファイル/フォルダーを無視します。
• ignore: ['packagename/']でパッケージ全体を無視します。
• 特定のファイル/パッケージのみを削除するには、purgeOnly: ['fileOrPackage/']を使用してください。
• デフォルトでは、js、jsx、ts、tsxファイルのみがセレクターのスキャン対象となります。mdまたはmdxを追加したい場合は、content: [path.join(process.cwd(), 'src/**/!(*.d).{ts,js,jsx,tsx,md,mdx}')]を使用するか、必要なセレクターをホワイトリストに登録することをお勧めします。