如何使用PurgeCSS工具清除Bootstrap项目中未使用的CSS代码？-css教程-PHP中文网

purgecss对bootstrap基本无效，因其仅静态扫描源码中显式出现的类名，而bootstrap大量依赖data-bs-*属性、js动态拼接、模板条件渲染及@extend生成的复合选择器，导致真实使用的类名无法被识别；正确做法是放弃后处理bootstrap.min.css，改用sass按需导入并禁用未用组件。

如何使用purgecss工具清除bootstrap项目中未使用的css代码？

直接在全量引入 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，改用官方支持的、可预测的裁剪方式：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

彻底删除 @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 是否被删？