purgecss 扫不到 html 里的 class 是因为默认仅字符串级扫描 content 列表中的静态文件，不解析 html 结构，无法识别服务端渲染、压缩、js 拼接、模板引擎或动态类名等内容。
为什么 PurgeCSS 扫不到 HTML 里的 class？
因为默认配置下，PurgeCSS 只读取 content 数组里列出的文件路径，且对文件内容做**字符串级扫描**——它不解析 HTML 结构，只用正则找 class="..."、className=... 这类文本。如果 HTML 是服务端渲染生成的、或被压缩成一行、或 class 名被 JS 拼接（如 class="btn {{ type }}-primary"），它就完全看不见。
- 确保
content路径是绝对路径，比如path.join(__dirname, 'src', '*.html')，别用相对路径或 glob.sync（Windows 下易失效） - HTML 文件必须是构建前就存在的静态文件；如果是模板引擎（如 EJS、Pug）输出的，得先编译成真实 HTML 再喂给 PurgeCSS
- 压缩过的 HTML（如
class="a b c"被压成class=a b c）会破坏正则匹配，建议在 PurgeCSS 前禁用 HTML 压缩，或改用 AST 解析器
PostCSS 中 PurgeCSS 插件顺序错位导致 CSS 全空
常见现象：构建后 CSS 文件只剩 @charset "UTF-8";，或者 Lighthouse 显示 “CSS 规则数为 0”。根本原因是插件执行顺序错误，尤其是 @fullhuman/postcss-purgecss 被放到了 cssnano 后面，而 cssnano 的 discardUnused 默认开启，会二次清空。
- PostCSS 配置中必须严格按顺序写：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano必须显式关掉冗余清理：{ discardUnused: { discardUnused: false } }，否则和 PurgeCSS 功能重叠 - 如果用了
devtool: 'source-map'，务必关掉——source map 注释（如/*# sourceMappingURL=... */）会被误识别为 class 名，污染匹配结果
动态类名（hover、group-hover、data-*）被误删
Tailwind 或自定义变体类（如 hover:bg-blue-500、[data-state=open]、group-hover:text-red-500）默认不会被提取，因为它们不出现在原始 HTML 的 class 属性值里，而是靠伪类或属性选择器运行时生效。
- 加进
safelist用正则兜底：/^(hover|focus|active|group-hover|data)-/、/\[.*\]/、/^is-/（覆盖is-open等状态类） - 启用
keyframes: true和fontFace: true，否则@keyframes和@font-face会被连带清除 - 对
[&_svg]这类嵌套选择器，Tailwind v3+ 推荐直接用内置content配置（而非额外装@fullhuman/postcss-purgecss），避免 extractor 不兼容
Webpack 中 PurgeCSSPlugin 扫不到 .vue/.tsx 里的动态 class
Webpack 插件 PurgeCSSPlugin 在 vue-loader 或 @babel/preset-react 处理前就运行，看到的是原始模板字符串，比如 class="btn {{ type }}-btn"，根本没 primary-btn 这个字面量。
- 换用
modules: true（PurgeCSSPlugin支持 AST 解析），或直接迁移到vite-plugin-purgecss（Vite 项目） - 不要用
glob.sync('./src/**/*.vue')—— 它扫的是未编译的源码文本，应改为path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}')并配合defaultExtractor或extractors - 若用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的插件，它的输出不在content范围内，必须手动把对应 JS 路径加进content数组，否则整块样式被清空
真正卡住人的不是“怎么配”，而是“它到底看到了什么”。PurgeCSS 不会猜逻辑，只认字面量和你给它的白名单。动态拼接、框架绑定、属性选择器、source map 注释——这些全得靠配置补漏，少一个环节就可能删掉关键样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
