0

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

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

示例：我在主页上使用 className="table" 但我从不在其他页面上使用它，我看到所有页面都包含“.table”CSS。有办法防止这种情况吗？

4

1 回答 1

0

你有两个问题：

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

第一个应该使用标准文件夹和导入结构来修复。假设您有一个从layout.js. 在这种情况下，您的table样式应该是只在您的主页中导入的 CSS。所以：

  • 在文件夹homepage.css内创建一个styles
  • 将您的table样式添加到homepage.css
  • 仅在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
  }
}

在ignoreandpurgeOnly数组中，您可以包含要忽略或相反的所需文件夹以强制清除（注意目录结构）。

于 2020-12-07T05:59:23.280 回答