safelist写了类名仍被删，是因为purgecss仅在类名以完整静态字符串形式出现在content扫描路径中时才触发保留；若content漏配、safelist格式错误（如带点前缀或字符串代替正则）、或类名动态生成未显式写出，则safelist失效。
为什么 safelist 里写了类名却还是被删了
PurgeCSS 不是“写进 safelist 就保命”，它只在匹配到对应类名字符串时才触发保留逻辑。如果类名根本没出现在 content 配置扫描的文件里，safelist 就像一张没寄出的快递单——压根不启动。
常见错误现象：modal-open 明明加进了 safelist，但构建后弹窗样式消失；bg-red-500 在 JS 里通过 el.classList.add('bg-red-500') 动态添加，结果被删得一干二净。
- 类名必须以**完整、静态字符串形式**出现在
content路径下的源码中：比如class="modal-open"或classNames('modal-open')可被识别，但class={\`modal-\${isOpen ? 'open' : 'close'}\`}不行 - safelist 中的字符串不能带点前缀：
'modal-open'✅，'.modal-open'❌（PurgeCSS 内部匹配的是类名本身，不是选择器） - 正则写法必须用
/pattern/字面量，不是字符串：/{ pattern: /^text-/ }✅，/{ pattern: "^text-" }❌
safelist 正则匹配不到 BEM 类名怎么办
BEM 的 __ 和 -- 结构容易被默认提取器忽略，尤其当类名是动态拼接或跨文件定义时，正则写错一个字符就全军覆没。
错误现象：card__header--sticky 没出现在最终 CSS 中，但你在 safelist 里写了 /card__/ 却没用。
- 必须用完整结构匹配：
/[a-z]+(__|--)[a-z]+/才能同时捕获card__header和card--expanded - 单独写
/card__/只匹配开头，card__header中的header部分不参与匹配，但 PurgeCSS 是按整个类名做判定的，所以无效 - 推荐组合写法：
safelist: [/^[a-z]+(__|--)[a-z]+$/, /button--(primary|secondary)/]，注意开头的^和结尾的$保证全名匹配 - 如果用了
@layer components定义 BEM 类，但 HTML 模板里没真实出现该类，safelist 也救不回来——得补上注释占位：<!-- <div class="card__header"></div> -->
第三方组件库的类名怎么进 safelist
PurgeCSS 默认不看 node_modules，它只信你 content 里写的路径。像 react-datepicker__day 这种类名，除非你在 JSX 里手写过，否则插件根本不知道它存在。
典型翻车场景：用了 Ant Design 的 Modal，但没在任何 .jsx 文件里写 ant-modal，结果弹窗框体样式全丢。
- 最稳做法：显式扫描组件库源码路径，例如
./node_modules/react-datepicker/**/*.{js,ts}（需确保该路径下真有类名字符串） - 更常用做法：把关键类名直接写进 safelist，比如
['ant-modal', 'rc-select-dropdown', 'van-button'] - 对 Tailwind 用户，别漏掉
keyframes和variables相关白名单：{ keyframes: true, variables: true }，否则@apply animate-spin或var(--color-primary)会失效
如何验证 safelist 是否真正起作用
别靠猜，用终端命令快速验证。构建完后直接搜目标类名是否还在输出 CSS 里，比反复刷新页面快十倍。
错误排查思路：先确认类名有没有被 PurgeCSS 看见，再确认它有没有被保留。
- 查是否被提取：运行
grep -o "modal-open" ./src/**/*.{js,tsx,vue,html} | head -5，看有没有输出 —— 没输出说明content漏了文件 - 查是否被保留：构建后执行
grep -c "modal-open" dist/*.css，返回 0 表示没保留，非 0 表示生效 - 查是否误删其他类：用
diff对比前后 CSS 文件体积和关键类数量，避免 safelist 写错导致“保了一个，删了一片” - 注意：Webpack 构建产物可能被压缩，建议先关掉 CSS 压缩（如
minimize: false），方便肉眼确认
真正卡住人的往往不是 safelist 写不写，而是它和 content 的配合关系——一个漏扫，一个白写；一个写错格式，一个全盘失效。动态类名、BEM 变体、第三方库这三类问题，90% 都出在“以为写了就安全”这个错觉上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
