purgecss未删除bootstrap类的根本原因是默认仅扫描.html和.js文件，而vue/react等框架中的类名需通过extractors或content显式配置；safelist是必需的保活手段，插件执行顺序和路径匹配也至关重要。
purgecss 为什么没删掉你写的 bootstrap 类
根本原因不是配置写错了，而是 purgecss 默认只扫描 .html 和 .js 文件里的类名，而 bootstrap 的 class（比如 btn-primary、col-6）往往出现在模板字符串、jsx、vue 模板或服务端渲染的 html 中——这些路径默认不被纳入扫描范围。
- 如果你用的是 Vue，得显式加
extractors处理<template></template>块里的类名 - React 用户必须配置
content匹配所有.tsx?和.jsx?文件，否则className="d-flex justify-content-center"这种完全不会被识别 -
safeList不是兜底方案，是救命稻草：Bootstrap 的动态类（如bg-${color}）必须靠它保活，否则全删光
PostCSS + purgecss 插件的常见断点位置
很多人在 postcss.config.js 里加了 purgecss，但构建后 CSS 体积纹丝不动——大概率是插件执行顺序错了。PurgeCSS 必须在 cssnano 或 autoprefixer 之后运行，否则压缩或前缀补全可能把类名改得面目全非，导致匹配失败。
- 错误顺序：
autoprefixer → purgecss → cssnano（cssnano可能合并选择器，让原始类名消失） - 正确顺序：
autoprefixer → cssnano → purgecss或更稳妥的：autoprefixer → purgecss → cssnano（但要关掉cssnano的reduceTransforms等激进优化） - Webpack 用户注意：
mini-css-extract-plugin输出的 CSS 文件路径必须严格匹配purgecss.content配置，多一个src/少一个**都会漏扫
Bootstrap 5 的 data-bs-* 属性要不要管
不用管。PurgeCSS 删除的是 CSS 选择器，而 data-bs-toggle、data-bs-target 是 JS 行为触发器，不生成任何样式规则。但要注意：如果你自定义了基于这些属性的 CSS（比如 [data-bs-toggle="modal"] { cursor: pointer; }），就得把 data-bs-toggle 加进 safeList，否则连带样式一起被清掉。
-
data-bs-类属性本身不影响 PurgeCSS 结果 - 真正危险的是你写的
[data-bs-xxx]选择器，它们不会被自动识别，必须手动safeList - Bootstrap 5 的 JS 组件依赖这些属性，删掉它们会导致下拉、模态框等功能直接失效
开发时 CSS 突然全没了？检查这三处硬编码
本地跑着好好的，CI 上打包后页面白屏或样式崩坏，八成是 PurgeCSS 把关键类误删了。不是工具不靠谱，是你没告诉它哪些类“看起来没用，其实不能删”。
-
container、row、col这些栅格类常出现在 JS 动态拼接的 HTML 字符串里（比如el.innerHTML = '<div class="row">...'），必须进 <code>safeList - 所有用到
!important的覆盖样式（比如.text-danger !important），PurgeCSS 无法推断优先级，容易漏保 - 使用
@apply的 Tailwind 用户注意：Bootstrap 和 Tailwind 混用时，@apply bg-primary这类写法中的bg-primary不会被 PurgeCSS 当作类名提取，得单独保
最麻烦的永远不是怎么配，而是你怎么确认“这个类到底有没有被用到”——建议先开 rejected 日志，看 PurgeCSS 到底扔了哪些，再针对性保活。不然就是盲调。
