Gatsby

提示

此插件由 @anantoghosh 创建，此页面摘自自述文件。你可以在 插件存储库 找到更多信息

你可以使用 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/']。
• 默认情况下，仅扫描 js, jsx, ts, tsx 文件以查找选择器。如果您想添加 md 或 mdx，请使用 content: [path.join(process.cwd(), 'src/**/!(*.d).{ts,js,jsx,tsx,md,mdx}')]，或者更好，只需将所需选择器列入白名单。