PurgeCSS对Bootstrap基本无效，因其仅静态扫描源码中显式出现的类名，而Bootstrap大量依赖data-bs-*属性、JS动态拼接、模板条件渲染及@extend生成的复合选择器，导致真实使用的类名无法被识别；正确做法是放弃后处理bootstrap.min.css，改用Sass按需导入并禁用未用组件。
直接在全量引入 bootstrap.min.css 后跑 PurgeCSS，几乎删不掉几行——它根本没机会看到 Bootstrap 真正在用的类。
为什么 PurgeCSS 对 Bootstrap 基本无效
PurgeCSS 只能删掉「你在源码里完全没写过的类名」，但 Bootstrap 的关键类名往往不出现在静态文件中：
-
data-bs-toggle="modal"触发的样式不会出现在 HTML 里，PurgeCSS 扫不到 -
element.className = 'btn btn-' + type这种 JS 拼接，静态分析直接漏掉 -
mb-3、d-none常由 JS 切换或模板条件渲染，PurgeCSS 很难覆盖全 -
@extend生成的复合选择器（如.btn.btn-outline-primary）可能被误判为未使用
真正有效的 CSS 裁剪路径：从 Sass 源头控制
放弃在构建后处理 bootstrap.min.css，改用官方支持的、可预测的裁剪方式：
- 彻底删除
@import "bootstrap/scss/bootstrap"或import 'bootstrap/dist/css/bootstrap.min.css' - 只在
main.scss中按需导入：@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/mixins"→ 再加@import "bootstrap/scss/buttons"、@import "bootstrap/scss/grid"等 - 禁用未用组件：注释掉
@import "bootstrap/scss/modal"、@import "bootstrap/scss/tooltip"等 - 构建后用文本搜索检查最终 CSS 是否含
.carousel、.offcanvas—— 如果还有，说明 import 没清理干净或被其他依赖间接引入
如果你坚持要用 PurgeCSS，请绕开这些坑
仅当项目已完全脱离 Bootstrap JS、且所有 class 都写死在模板中时才考虑。必须做到：
立即学习“前端免费学习笔记（深入）”；
- 在
purgecss配置的defaultExtractor中显式保留data-bs-属性匹配逻辑 - 把所有 utility 类前缀加入
whitelistPatterns：/^d-/、/^m-/、/^p-/、/^text-/、/^bg-/ -
content字段必须包含所有 JS 模板字符串和服务器端渲染输出路径，否则class="${type}"这类场景必漏 - 每次升级 Bootstrap 版本后重新验证：
.dropdown-menu是否还在？.visually-hidden是否被删？
最常被忽略的一点：即使 PurgeCSS 成功删掉 80% 的 CSS 字节，若服务器没开 Brotli，传输体积仍可能比不开 PurgeCSS 但启用 Brotli 的 bootstrap.min.css 更大。
