"gatsby-plugin-purgecss"将每个页面的所有使用的CSS添加到所有页面，有没有办法防止这种情况？

Question

我正在使用我添加的Bulma框架"gatsby-plugin-purgecss"；要删除未使用的CSS，它工作得很好，但当我查看公共文件夹中的页面时，所有页面上的所有CSS都是相同的。

如何让它只添加同一页面使用的CSS，我有大约22k个页面，每个页面都有他的风格CSS。

示例：我使用className="表"；在主页上，但我从不在其他页面上使用它，我看到所有页面都包括"；。表"；CSS。有办法防止这种情况发生吗？

Answer 1

您有两个问题：

1. 错误的样式导入
2. CSS的清除

第一个应该使用标准文件夹和导入结构进行修复。假设您有一个从layout.js扩展而来的主页。在这种情况下，您的table样式应该位于仅在主页中导入的CSS中。因此：

• 在styles文件夹中创建homepage.css
• 在homepage.css中添加您的table样式
• 仅在index.js页面中导入样式。如果在布局或其他共享组件中添加样式，则在使用该文件的每个组件和页面中都会导入样式，从而浪费编译和计算时间

一旦解决了第一个问题，就可以专注于第二个问题。如果没有，你正试图为你的插件添加一种逻辑，让它知道在哪个页面应该或不应该清除样式。gatsby-plugin-purgecss为白名单添加了一系列选项或忽略一些文件和文件夹：

{ 
resolve: `gatsby-plugin-purgecss`,
options: {
// 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
}
}

在ignore和purgeOnly数组中，您可以包含要忽略的所需文件夹，也可以包含相反的文件夹，以强制清除(注意目录结构(。