purgecss对bootstrap项目效果差，因其仅静态扫描源码中写死的类名，无法识别data-bs-*属性、js动态拼接类及模板条件渲染的utility类；正确做法是先通过sass按需导入组件并禁用未用模块，再让purgecss作用于自编译css。
PurgeCSS 对 Bootstrap 项目效果差，不是工具不行，而是用错了地方——它不该处理 bootstrap.min.css，而该作用于你用 Sass 按需编译出的 CSS。
为什么 PurgeCSS 直接扫 bootstrap.min.css 基本无效
它只匹配源码里「静态写死」的类名字符串，但 Bootstrap 5+ 的关键样式由 data-bs-toggle、data-bs-dismiss 等属性触发，JS 动态拼接的类（如 element.className = 'btn btn-' + type）和模板条件渲染的 utility 类（如 v-if="show" class="d-block d-md-none"）根本不会出现在 HTML 或 JS 字符串中。结果就是：PurgeCSS 扫一圈，发现「.btn」「.container」都“没用过”，却把真正生效的 .dropdown-menu、.visually-hidden 全删了。
常见现象包括：
- 构建后 CSS 体积下降不到 5%，Lighthouse 仍报大量 unused CSS
- 模态框点不开、下拉菜单不展开、响应式工具类失效
- 本地开发正常，部署后部分组件样式错乱
正确做法：先 Sass 按需导入，再让 PurgeCSS 扫你自己的输出
必须切断全量引用，改走官方推荐的 Sass 编译链。否则 PurgeCSS 就是给已经压缩过的二进制 CSS 做无用功。
- 删掉所有类似
import 'bootstrap/dist/css/bootstrap.min.css'或@import "bootstrap/scss/bootstrap"的语句 - 新建
src/custom-bootstrap.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、且所有类名都硬编码在模板里，可谨慎启用，但必须补全扫描盲区。
-
content字段必须覆盖所有路径：./src/**/*.{html,js,ts,jsx,tsx,vue}，尤其不能漏掉 JSX/TSX 中的className和 Vue 的v-bind:class - 在
defaultExtractor中显式支持data-bs-*属性匹配，例如正则：/data-bs-[a-z-]+/ - utility 类前缀加入
whitelistPatterns：/^d-/、/^m-/、/^p-/、/^text-/、/^bg-/ - 启用
keyframes: true和fontFace: true，否则动画和字体规则可能误删 - 每次升级 Bootstrap 后重新验证：
.dropdown-menu是否还在？.visually-hidden是否被删？
最常被忽略的一点：压缩算法比 PurgeCSS 更影响传输体积
即使 PurgeCSS 成功删掉 80% 的 CSS 字节，若服务器没开 Brotli，传输体积仍可能比「不开 PurgeCSS 但启用 Brotli」的 bootstrap.min.css 还大。别只盯着文件大小看，得看实际网络传输量。构建后用 curl -H "Accept-Encoding: br" -I 验证 Brotli 是否生效，这才是移动端首屏加载快慢的决定性一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
