PurgeCSS无法识别动态生成的CSS类，因其仅静态扫描字面量类名，不执行JS或解析响应式绑定；必须通过safelist正则显式保留或改用AST解析工具如UnoCSS。
直接上结论：不能只靠静态扫描，必须「运行时检测 + 静态分析」双路验证，否则删掉的很可能是正在用的样式。
为什么 PurgeCSS 扫完页面就崩了
PurgeCSS 只看字符串匹配，不执行 JS 逻辑。它看到 class="btn btn--${type}" 就认不出 btn--primary 是否存在，更不知道 v-if="showHelp" 渲染后会挂载哪些类名。
- 动态拼接类名（
class="text-" + color）必须加safelist正则，比如/^text-.+$/ - Tailwind 用户别手写 PurgeCSS 配置，改用
tailwind.config.js的content字段——它基于 AST 解析，比字符串匹配鲁棒得多 - Vue 的
v-show、React 的className={active ? 'active' : ''}这类分支，PurgeCSS 静态扫描时根本不会进入，得靠运行时抓取 - 检查
purgecss --dry-run输出的removedSelectors日志，重点核对明显在用却被删的类（如is-active、md:hidden）
用 Chrome Coverage 真实验证 CSS 是否“真没用”
DevTools 的 Coverage 工具标红的规则（0% 使用率），不代表能直接删——它只反映当前视口、当前路由、当前交互状态下的执行情况。
- 打开 DevTools → More Tools → Coverage → 刷新页面，它会列出所有加载的 CSS 文件及每行使用率
- 必须手动点开所有可交互区域：菜单展开、表单校验失败、loading 态、错误弹窗、移动端视口切换
- 单页应用（SPA）要跳转到每个路由后再点 Reload coverage，否则只统计首页
- 红色行可能是
@keyframes或媒体查询中未触发的规则，也可能是 JS 动态insertRule注入的，不能见红就删
Webpack/Vite 中配置 PurgeCSS 的关键细节
配错一个参数，PurgeCSS 就会漏扫或误删。尤其要注意 content 路径和 loader 执行顺序。
-
content必须覆盖所有可能含类名的文件：path.join(__dirname, 'src/**/*.{js,ts,jsx,tsx,vue,html}')，漏掉.html或.vue就会大量误删 - PostCSS 插件顺序不能错：必须是
css-loader → postcss-loader → sass-loader，否则@fullhuman/postcss-purgecss拿不到编译后的 CSS - Vite 用户注意：
css.postcssOptions.plugins中引入 PurgeCSS 时，content路径要用绝对路径，且需确保resolve.alias不干扰 glob 匹配 - Webpack 用户若用
MiniCssExtractPlugin，确保 PurgeCSS 在postcss-loader阶段运行，而不是在插件提取之后——否则它处理的是未合并的 chunk CSS，效果打折
SCSS 源码层就能避免冗余生成
很多“未使用 CSS”根本不是漏删出来的，而是源码写法导致编译时就膨胀了。这类问题 PurgeCSS 压根救不了。
- 嵌套 ≥3 层（如
.card .list .item a）会生成冗长选择器，压缩后体积不变，匹配性能还差；改用 BEM 命名（.card-list-item） -
@extend %flex-center在多个上下文中调用，会复制出.btn, .modal, .sidebar .btn这类爆炸式列表，改用@mixin+ 参数控制 -
@for $i from 1 through 100 { .m-#{$i} { margin: #{$i}px; } }生成固定 100 条规则，PurgeCSS 无法识别哪些m-42实际被用了 -
@import "bootstrap.scss"即使只调用一个px2rem()，也会把整个 bootstrap 编译进来；应改用按需引入或 ESM 方式
最易被忽略的点：PurgeCSS 和 Coverage 都只管“是否出现”，不管“是否被覆盖”。一条规则即使被用了，也可能被后续同名声明完全覆盖（比如两个 color: red，后者生效，前者白写）。这种冗余只能靠人工结合 “Computed” 面板里的 strikethrough 样式去定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
