问题标签 [css-purge]

这是我从 CMS 获取一些 JSX 代码并使用 react 渲染它的方法

唯一的问题是这会从获取的代码中清除自定义类名。我在顺风文档中看到我可以使用转换，但不知道如何解决这个问题。有任何想法吗？

在我们的 NextJS (10.0.0) 应用程序中使用 React-bootstrap，并且需要删除未使用的 CSS，因此使用 purgecss。但是在这样做之后，所有的 CSS 都被删除了https://purgecss.com/guides/next.html。并发现这个问题是因为我们正在使用的 CSS 模块。

这是我的 postcss.config.js

}

有什么方法可以删除未使用的 CSS？

我尝试了 nextjs 12 'URL Import' 的新功能，所以我在开发模式下从 unpkg.com 导入组件很好（它是一个用 tailwindcss 设计的组件），但是当我构建应用程序时，清除不理解类由我的导入组件使用，因此删除了必要的样式。

无论我怎么想这个问题，我都找不到任何解决方案。至少可以通过 URL 导入使清除工作吗？

Purge CSS 不会从我的 react 应用程序中删除任何未使用的 tailwindcss 类。我认为它没有正确配置。

这是我的 tailwicss-config.js 文件代码：

package.json 文件：

使用什么作为Tailwind 3 的PurgeCSS提取器？

使用 Tailwind 2，我们可以使用他们在内部文件中提供的默认提取器，但它不是公共 API，实际上它现在已经消失：https ://github.com/tailwindlabs/tailwindcss/discussions/6162 。

尾风 3 有什么用？

使用从 Tailwind 内部复制的提取器会更改以下代码：

对此

这是完全错误的（尤其是 Tailwind 3）。

这似乎是一个模糊的问题，但请阅读 - 我正在寻求有关开发构建过程的具体建议。

经过十年的编码，我有一个非常舒适的构建过程。然而，当我观察当前趋势时，我看到了像 PurgeCSS 这样的新工具，甚至出现了新的 CSS 框架（TailWind 等）。我知道我的构建过程可以改进。

这是我对专业级开发人员的问题：

您将使用哪些流程/工具来完成开发/构建流程中的这些步骤？

1. 自定义 Bootstrap 5 - 颜色，仅加载需要的组件等。

   • 目前，我只是根据需要使用 BS5 的未编译 src 和配置 - 但最近我遇到了https://bootstrap.build/app，你会推荐什么？你会推荐一个不同的 CSS 框架或资源吗？

2. 为生产编译 SCSS 文件

   • 我通常为此使用 codekit，但很多时候发现自己使用的是 BS5 自定义构建，并且只是一个用于自定义样式的小 style.css 文件。

3. 在构建生产文件之前删除未使用的 CSS

   • 我目前在我的过程中没有任何东西可以做到这一点

我很想看看其他专业开发人员正在使用什么。我知道你们中的大多数人将拥有一个比我现在更完整、更复杂或可配置的流程——这就是我问的原因:)

在堆栈溢出的方式中，我问这样我可以变得比以前更好。

感谢您的建议。

背景：

我有一个Webpack 设置，我使用 PurgeCSS 预处理 SCSS，并使用带有esbuild-loader的实时 HMR 服务器来加速 Webpack 中的编译，但即便如此我的编译时间仍然很慢，我想要 ESBuild 的原始速度并删除 Webpack完全设置。

ESBuild 的基本设置很简单，您可以使用 npm 安装 esbuild 并在package.json中添加以下代码：

并使用以下命令运行它：

这种单行配置将捆绑您的脚本和样式（您可以在 script.js 中导入 style.css）并在 dist 目录中输出文件，但这不允许 ESBuild 的高级配置，例如为您的样式表输出不同的名称和脚本文件或使用插件。

问题：

1. 如何使用外部配置文件配置 ESBuild？
2. ESBuild 不支持开箱即用的 SCSS。如何配置像esbuild-sass-plugin这样的外部插件，更进一步，如何设置PostCSS及其像Autoprefixer这样的插件？
3. 如何使用自动重建设置开发服务器？
4. 如何设置 PurgeCSS？

我需要将所有边距值与相应的响应大小一起列入安全列表。

例子：

• 'mb-10'
• 'md:mb-10'
• 'xl:mb-10'

等等。

这是我现在拥有的内容，tailwind.config.js但它似乎不适用于响应式变体：

有没有一种简单的方法可以使用正则表达式模式来实现这一点，还是我需要任何其他特定配置？我当然想避免手动列出它们。

我有组件级 .scss 文件（filename.module.scss），我想从这些文件中清除未使用的 css。

由于样式类名被散列。我想知道如何让 purgeCSS 与使用 module.scss 文件进行大部分样式设置的 next.js 应用程序一起工作。

https://github.com/FullHuman/purgecss/issues/163#issuecomment-526607181 这个问题在这里解决了，但是对于反应应用程序

我正在使用配置文件使用 csspurge。我将 css 写为 lg\:right-40js，在 js 中它被称为lg:right-40. 在 js 中反斜杠被转义，因此 purgecss 无法识别所有包含\

css文件

purgecss.config.js

我想将 css 类\与 js 类匹配而没有\