purgecss不会删除data-bs-toggle属性本身，因其仅处理css选择器；真正被误删的是自定义的[data-bs-toggle="modal"]等属性选择器，须手动加入safelist。
为什么PurgeCSS会删掉data-bs-toggle这类Bootstrap类
PurgeCSS根本不会删data-bs-toggle本身——它只处理CSS选择器，而data-bs-toggle是HTML属性，不生成任何样式规则。真正被误删的是你自定义的[data-bs-toggle="modal"]这类属性选择器，或者Bootstrap源码里依赖该属性的伪类规则（如[data-bs-toggle].btn）。这些选择器不会出现在content扫描的字符串中，除非你手动加进safelist。
Bootstrap的btn-primary为什么在JS拼接时被删光
当你写element.className = 'btn btn-' + type或React里className={`btn btn-${type}`}，PurgeCSS看不到btn-primary这个字符串——它只提取字面量，不执行JS逻辑。结果就是所有btn-*类全被判定为“未使用”。
- 必须用正则白名单：
/^btn-/、/^text-/、/^bg-/ - 别只写
'btn-primary'——动态值多时靠单个字符串保不住 - Bootstrap 5的
.offcanvas、.visually-hidden也属此类，漏加就丢功能
为什么本地正常但生产环境模态框打不开
开发时没启用PurgeCSS，所以.modal、.fade、.show全在；构建后这些类被清掉，但Bootstrap JS仍尝试操作它们——DOM结构还在，样式没了，视觉上就是“点不动”。这不是JS报错，而是CSS缺失导致的静默失效。
- 检查最终CSS文件是否含
.modal、.dropdown-menu等关键词 - 确认
@import "bootstrap/scss/modal"没被注释掉（按需导入才是源头控制） - 若用了PurgeCSS，
safelist必须包含/^modal-/、/^dropdown-/等前缀
PostCSS里放purgecss插件为何完全没效果
因为PostCSS阶段看到的是编译后的CSS，而PurgeCSS需要原始模板上下文去匹配类名。它在cssnano之后运行，压缩后的选择器可能已被重命名或合并，导致匹配失败。
- 正确顺序：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano必须关掉discardUnused: true，否则二次清理 - Webpack用户应改用
purgecss-webpack-plugin，且放在MiniCssExtractPlugin之后
safelist兜底——比如col-6写死在HTML里就能留，col-${span}就必须正则保活。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
