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

• 在 gatsby-config.js 中定義選項，而不是 purgecss.config.js。
• 如果使用 tailwindcss，請使用 tailwind: true 選項。
• 使用 printRejected: true 選項來列印已移除的選取器。
• 只有由 Webpack 處理的檔案才會被清除。
• my-selector 不會與 mySelector 相符。
• 使用 白名單解決方案 指南將必要的選取器加入白名單或忽略檔案/資料夾。
• 使用 ignore: ['packagename/'] 忽略完整的套件。
• 若要僅清除特定檔案/套件，請使用 purgeOnly: ['fileOrPackage/']
  編輯此頁面
  最後更新時間：
  貢獻者： Ffloriel, Floriel