purgecss对bootstrap基本无效，因其仅静态扫描源码中明文类名，无法识别data-bs-*属性、js动态拼接、模板条件渲染及@extend生成的选择器；正确做法是改用sass按需导入并禁用未用组件。
PurgeCSS 在大型 Bootstrap 项目里不是“需要”，而是常被误用的工具——它本身不解决体积问题，反而容易引发样式丢失。真正有效的精简路径是源头控制，PurgeCSS 只有在特定前提下才可作为补充。
为什么直接对 bootstrap.min.css 运行 PurgeCSS 基本无效
PurgeCSS 是静态扫描器，只认源码里「明文写出」的类名字符串。但 Bootstrap 5+ 的关键样式依赖：data-bs-toggle 属性、JS 动态拼接（如 element.className = 'btn btn-' + type）、模板条件渲染（如 v-if="show" class="d-block"）、Sass @extend 生成的复合选择器（如 .btn.btn-outline-primary）——这些都不会出现在 HTML 或 JS 字符串中。
- 结果就是：构建后 CSS 体积下降不到 5%，Lighthouse 仍报大量 unused CSS
- 模态框点不开、下拉菜单不展开、
.visually-hidden被删、响应式工具类失效 - 本地开发正常，部署后部分组件样式错乱
真正该做的：用 Sass 按需导入替代全量引入
这是 Bootstrap 官方支持且可预测的裁剪方式，比任何后处理都干净。
- 删掉所有类似
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/grid"、@import "bootstrap/scss/buttons"等 - 注释掉未用组件：
@import "bootstrap/scss/modal"、@import "bootstrap/scss/tooltip"、@import "bootstrap/scss/carousel" - 构建后用文本搜索验证最终 CSS 是否含
.carousel、.offcanvas—— 如果还有，说明 import 没清理干净，或被其他依赖间接引入
如果非要上 PurgeCSS，必须绕开三个硬坑
仅当项目已完全脱离 Bootstrap JS、且所有类名都硬编码在模板中时才考虑启用。
-
content字段必须覆盖所有路径：./src/**/*.{html,js,ts,jsx,tsx,vue}，尤其不能漏 JSX/TSX 中的className和 Vue 的v-bind:class - 启用
keyframes: true和fontFace: true，否则动画和字体规则可能误删 - 必须配置
safelist：加入/^d-/、/^m-/、/^p-/、/^text-/、/^bg-/等 utility 前缀；还要显式保留data-bs-*属性匹配逻辑 - PostCSS 插件顺序必须严格为：
tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano；cssnano中要关掉discardUnused: false
最常被忽略的一点：PurgeCSS 不等于传输优化
即使它成功删掉 80% 的 CSS 字节，若服务器没开 Brotli，传输体积仍可能比不开 PurgeCSS 但启用 Brotli 的 bootstrap.min.css 更大。体积数字不等于网络表现，得看压缩后实际字节数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
