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`,
    // 如果使用了上述插件，请在它们之后添加
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // 打印已删除的选择器和处理的文件名
        // develop: true, // 在使用 `gatsby develop` 时启用
        // tailwind: true, // 启用 tailwindcss 支持
        // whitelist: ['whitelist'], // 不删除此选择器
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // 忽略文件/文件夹
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // 仅清理这些文件/文件夹
      }
    }
  ]
};

快速概览

在 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}')]，或者更好的是，只需白名单必需的选择器。