Gatsby 插件

提示

此插件的作者为 @anantoghosh ，本页面上的内容是从此插件的 ReadMe 中摘取的。 你可以在 此插件的源码仓库 中了解更多信息

你可以使用 PurgeCSS 从 Gatsby 项目中的 css/sass/less/stylus 文件和模块中删除未使用的 css。支持 tailwind、bootstrap、bulma 等框架。

危险

此插件不是安装即忘型插件。默认情况下，此插件也可能会删除有用的 CSS 样式。

📘 在此处查阅最新文档。 • 更新日志 •

演示

在 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
      }
    }
  ]
};

总结

• 在 gatsby-config.js 文件中定义参数，而不是 purgecss.config.js 文件。
• 如果使用 tailwindcss，请设置 tailwind: true 参数。
• 设置 printRejected: true 用于列出被删除的选择器。
• 只有被 Webpack 处理的文件才会被 purgecss 处理。
• 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}')] 设置，或者只在白名单中列出需要保留的选择器。