# Gatsby 插件

TIP

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

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

WARNING

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

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

# 演示

gatsby-starter-bootstrap 中使用时

demo

gatsby-starter-bootstrap-cv 中使用时()默认安装

demo

# 支持的文件

# 安装

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-selectormySelector 不匹配。
  • 了解如何为白名单设置选择器或忽略的文件(或目录),请参阅 白名单解决方案 指南。
  • 通过 ignore: ['packagename/'] 参数指定发任软件包将被完全忽略。
  • 仅清理特定文件或软件包,请使用 purgeOnly: ['fileOrPackage/'] 参数。
  • 默认情况下,仅扫描 js、jsx、ts、tsx 文件中的选择器。如果要添加 mdmdx 文件,请使用 content: [path.join(process.cwd(), 'src/**/!(*.d).{ts,js,jsx,tsx,md,mdx}')] 设置,或者只在白名单中列出需要保留的选择器。