purgecss 为什么没删掉你写的 Bootstrap 类

根本原因不是配置写错了，而是 purgecss 默认只扫描 .html 和 .js 文件里的类名，而 bootstrap 的 class（比如 btn-primary、col-6）往往出现在模板字符串、jsx、vue 模板或服务端渲染的 html 中——这些路径默认不被纳入扫描范围。

如果你用的是 Vue，得显式加 extractors 处理 <template> 块里的类名React 用户必须配置 content 匹配所有 .tsx? 和 .jsx? 文件，否则 className="d-flex justify-content-center" 这种完全不会被识别safeList 不是兜底方案，是救命稻草：Bootstrap 的动态类（如 bg-${color}）必须靠它保活，否则全删光

PostCSS + purgecss 插件的常见断点位置

很多人在 postcss.config.js 里加了 purgecss，但构建后 CSS 体积纹丝不动——大概率是插件执行顺序错了。PurgeCSS 必须在 cssnano 或 autoprefixer 之后运行，否则压缩或前缀补全可能把类名改得面目全非，导致匹配失败。

错误顺序：autoprefixer → purgecss → cssnano（cssnano 可能合并选择器，让原始类名消失）正确顺序：autoprefixer → cssnano → purgecss 或更稳妥的：autoprefixer → purgecss → cssnano（但要关掉 cssnano 的 reduceTransforms 等激进优化）Webpack 用户注意：mini-css-extract-plugin 输出的 CSS 文件路径必须严格匹配 purgecss.content 配置，多一个 src/ 少一个 ** 都会漏扫

Bootstrap 5 的 data-bs-* 属性要不要管

不用管。PurgeCSS 删除的是 CSS 选择器，而 data-bs-toggle、data-bs-target 是 JS 行为触发器，不生成任何样式规则。但要注意：如果你自定义了基于这些属性的 CSS（比如 [data-bs-toggle="modal"] { cursor: pointer; }），就得把 data-bs-toggle 加进 safeList，否则连带样式一起被清掉。

data-bs- 类属性本身不影响 PurgeCSS 结果真正危险的是你写的 [data-bs-xxx] 选择器，它们不会被自动识别，必须手动 safeListBootstrap 5 的 JS 组件依赖这些属性，删掉它们会导致下拉、模态框等功能直接失效

开发时 CSS 突然全没了？检查这三处硬编码

本地跑着好好的，CI 上打包后页面白屏或样式崩坏，八成是 PurgeCSS 把关键类误删了。不是工具不靠谱，是你没告诉它哪些类“看起来没用，其实不能删”。

container、row、col 这些栅格类常出现在 JS 动态拼接的 HTML 字符串里（比如 el.innerHTML = ‘<div class="row">…’），必须进 safeList所有用到 !important 的覆盖样式（比如 .text-danger !important），PurgeCSS 无法推断优先级，容易漏保使用 @apply 的 Tailwind 用户注意：Bootstrap 和 Tailwind 混用时，@apply bg-primary 这类写法中的 bg-primary 不会被 PurgeCSS 当作类名提取，得单独保

最麻烦的永远不是怎么配，而是你怎么确认“这个类到底有没有被用到”——建议先开 rejected 日志，看 PurgeCSS 到底扔了哪些，再针对性保活。不然就是盲调。

立即学习“前端免费学习笔记（深入）”；

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。