PurgeCSS直接处理bootstrap.min.css基本无效，因其仅静态扫描明文类名，无法识别data-bs-*属性、JS动态拼接、条件渲染及@extend生成的选择器；应改用Sass按需导入并配置PurgeCSS作用于自编译CSS。
直接对 bootstrap.min.css 运行 PurgeCSS 基本无效——它删不掉多少，还可能把 .modal、.visually-hidden 这类关键样式误删。真正能瘦身的路径只有一条：放弃全量引入，改用 Sass 按需编译，再让 PurgeCSS 扫你自己的输出。
为什么 PurgeCSS 扫 bootstrap.min.css 会失效
PurgeCSS 只匹配源码中「显式写出的字符串」，而 Bootstrap 5 大量依赖以下几类动态机制：
-
data-bs-toggle、data-bs-dismiss等属性触发行为，类名不出现在字符串里 - JS 动态拼接：
el.className = 'btn btn-' + type→btn-outline-primary不会被扫描到 - Vue/React 中条件 class：
v-if="show" class="d-none"或className={show ? 'd-block' : 'd-none'} - Sass
@extend生成的复合选择器（如.btn.btn-outline-primary）在源码中根本不存在
结果就是：PurgeCSS 扫完，发现 .btn 没出现几次，却把真实生效的 .dropdown-menu 全干掉了。
必须改用 Sass 按需导入，而不是后处理
删掉所有类似 import 'bootstrap/dist/css/bootstrap.min.css' 的语句，新建 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/utilities"; - 注释掉不用的：
// @import "bootstrap/scss/modal";、// @import "bootstrap/scss/tooltip";
构建完成后，用文本搜索确认最终 CSS 文件里是否还有 .carousel 或 .offcanvas —— 如果有，说明 import 没清理干净，或被其他依赖（比如第三方组件库）间接引入了。
PostCSS 中 PurgeCSS 的配置要点
若你已走 Sass 编译链，且最终 CSS 由 PostCSS 处理，@fullhuman/postcss-purgecss 必须满足以下硬性条件：
- 插件顺序必须是：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
content数组要覆盖所有可能写 class 的地方：./src/**/*.{html,js,ts,jsx,tsx,vue}，尤其不能漏 JSX/TSX 的className和 Vue 的v-bind:class -
cssnano配置中必须设discardUnused: false，否则和 PurgeCSS 重复干活，可能二次误删 - 若项目用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的方案，它的输出路径得手动加进content数组，否则会被清空
哪些类名必须进 safelist
即使走 Sass 按需导入，以下类名仍需显式保留在 safelist 中，否则交互或响应式会失效：
- Bootstrap 的 data 属性类：
/^data-bs-/ - Utility 类前缀：
/^d-/（d-none）、/^p-/（pt-3）、/^text-/（text-muted） - Tailwind 变体（如用到）：
['hover', 'focus', 'active']并配合greedy: [/^bg-/, /^text-/] - JS 拼接常见模式：
/^btn-.*$/、/^alert-.*$/、/^modal-.*$/
别开 fontFace: true 或 keyframes: true，除非你确认项目里真用了自定义字体或动画——否则容易把 @font-face 或 @keyframes 规则误删。
