purgecss直接处理bootstrap.min.css基本无效，因其仅静态扫描源码中明文类名，无法识别data-bs-*属性、js动态拼接类及模板条件渲染的utility类，导致误删.dropdown-menu等关键样式且体积降幅不足5%。
bootstrap.min.css 基本无效，体积下降通常不到 5%，还会删掉 .dropdown-menu、.visually-hidden 等真正生效的样式——这不是 PurgeCSS 不行，是它被用在了错误的环节。
为什么 PurgeCSS 直接处理 bootstrap.min.css 失败
PurgeCSS 只能识别源码中「静态出现」的类名字符串，但 Bootstrap 5+ 的关键行为依赖三类动态机制：
-
data-bs-toggle、data-bs-dismiss等属性触发的样式（如模态框、下拉菜单），类名根本不出现在 HTML 文本里 - JS 动态拼接类：例如
el.className = 'btn btn-' + type，PurgeCSS 扫不到type的运行时值 - 模板条件渲染：Vue 的
v-if="show" class="d-block d-md-none"或 React 的className={`alert ${isError ? 'alert-danger' : 'alert-success'}`}，条件分支不会被静态分析捕获
结果就是：你本地看着正常，部署后下拉菜单点不开、响应式工具类失效、Lighthouse 仍报大量 unused CSS。
必须先走 Sass 按需编译，再让 PurgeCSS 扫你的输出
正确链路是切断全量引入，把 Bootstrap 的 SCSS 文件纳入 Webpack/Vite 构建流程，让 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/carousel"，比任何后处理都干净 - 构建后检查最终 CSS 是否还含
.offcanvas、.tooltip—— 如果有，说明 import 没清理干净，或被其他依赖间接引入
PurgeCSS 配置必须补全扫描盲区
即使走对了 Sass 编译链，若 PurgeCSS 配置不完整，仍会漏匹配。关键项：
-
content字段必须覆盖全部路径：./src/**/*.{html,js,ts,jsx,tsx,vue}，尤其不能漏 JSX/TSX 中的className和 Vue 的v-bind:class - 显式支持
data-bs-*属性：在defaultExtractor中加入正则，例如/data-bs-[a-z-]+/ - utility 类前缀需加入
whitelist：如/^d-[a-z]+$/（对应d-flex、d-none）、/^text-[a-z]+$/，否则.text-center这类会被误删 - Vite 用户优先用
vite-plugin-purgecss，但注意 Vite 4.3+ 内置了rollup-plugin-visualizer，建议先查清哪些包真正贡献了体积，再针对性配置
CssMinimizerPlugin 必须配合 mini-css-extract-plugin 使用
Webpack 下，CssMinimizerPlugin 只处理被提取出的独立 CSS 资源，如果 CSS 还混在 JS bundle 里，它就完全不生效。
- 确保
mode: "production"，否则插件默认不运行 - 在
module.rules中，生产环境用MiniCssExtractPlugin.loader替换style-loader -
plugins数组中必须同时包含：new MiniCssExtractPlugin({ filename: "css/[name].[contenthash:8].css" })和new CssMinimizerPlugin({ parallel: true }) - 确认
sass-loader能解析node_modules：在 Webpack 配置中设置resolve.alias或使用~前缀（如@import "~bootstrap/scss/functions"）
data-bs-* 属性和条件渲染类的白名单配置，漏掉任意一项，都可能导致组件样式静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
