可以使用 React-bootstrap 进行 PurgeCSS 吗？答案

【问题标题】：PurgeCSS with React-bootstrap possible?可以使用 React-bootstrap 进行 PurgeCSS 吗？
【发布时间】：2020-09-28 10:05:37
【问题描述】：

我有一个带有 react-bootstrap、bootstrap 和 scss 设置的 gatsby 站点，我正在尝试清除我未使用的 css。为此，我需要使用 purgeCss，但它不能按需要工作。似乎它无法捕获我在页面中使用的 react-bootstrap 组件中的类。我阅读了文档，尝试了一些修复，但没有任何效果。有人能帮我吗？

【问题讨论】：

嘿！你找到解决方法了吗？我正在尝试在 react 项目中执行此操作，甚至 postbuild 配置也不适合我！
刚刚遇到同样的问题并花了一些时间来了解整个事情是如何运作的。因此 purgeCSS 实际上将输入拆分为单词，然后在 CSS 文件中搜索匹配项。这就是为什么像Col xs={6} 这样的东西不起作用的原因，因为 purgeCSS 无法理解它。作为一种解决方法，我决定对网格和其他 react-bootstrap 组件（例如按钮）使用纯 HTML，我只是像 <Button className="btn-success"

标签： twitter-bootstrap gatsby react-bootstrap css-purge

【解决方案1】：

设置PurgeCSS 以允许我使用过的react-bootstrap 类：

purgeCss: {
    whitelist: () => ['html', 'body', 'collapse', 'collapsing'],
    whitelistPatterns: () => [/modal*/, /accordion*/, /card*/],
    whitelistPatternsChildren: () => [/modal*/, /accordion*/, /card*/]
},

【讨论】：