线上CSS丢失主因是PurgeCSS未扫描到class或删过狠：content路径未覆盖真实类名文件、插件顺序错误、动态类未进safelist，导致样式被误删。
线上 CSS 丢失，90% 是 PurgeCSS 扫不到 class 或删得太狠——它不执行 JS、不解析 Vue/React 模板逻辑，只认你给它的字符串和正则。配错 content 路径、插件顺序颠倒、漏掉 safelist 动态变体，都会直接导致按钮没样式、模态框不显示、hover 效果全失效。
content 路径必须扫到编译后的 class 字符串
你写 className={`btn ${type}-btn`}，PurgeCSS 看到的是字面量 btn ${type}-btn，根本提取不出 primary-btn。它不会运行 JS，也不会等 Vue 渲染完 DOM 再扫描。
- 别用
./src/**/*.vue：Windows 下路径分隔符失效，且读的是未编译的.vue源码，class="btn {{ type }}-btn"里根本没有真实类名 - 改用绝对路径 + 显式扩展名：
path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}') - 如果用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的插件，它的输出不在content范围内，得手动加进数组，否则整段 CSS 被清空 - Vite 用户优先用
vite-plugin-purgecss，它在 Rollup 转换后钩子中运行，能拿到编译后的 class 字符串；Webpack 用户用purgecss-webpack-plugin，别手写new PurgeCSSPlugin()
PostCSS 插件顺序错了，CSS 就只剩 @charset "UTF-8";
构建后 CSS 文件为空，或 Lighthouse 报 “CSS 规则数为 0”，基本就是插件顺序崩了。PurgeCSS 必须在 CSS 提取完成之后、压缩之前运行。
- PostCSS 配置必须严格按顺序：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano默认开启discardUnused: true，和 PurgeCSS 功能重叠，必须关掉：{ discardUnused: false } - Tailwind 项目别额外装
@fullhuman/postcss-purgecss——v3+ 自带content配置，多装一个插件反而冲突，删掉postcss.config.js里多余的 purgecss 插件 - Webpack 中
PurgeCSSPlugin必须放在MiniCssExtractPlugin之后，否则处理的是未提取的模块，不是最终输出的 CSS 文件
safelist 不是“加前缀就行”，得匹配最终渲染出的 class
Ant Design 的 Modal 渲染出 ant-modal 和 ant-modal-content，你写 /ant-/ 可能误保 ant-input，写 'ant' 则完全不匹配。safelist 是白名单，不是模糊搜索。
- 漏掉连字符或大小写：如写
'swiperSlide'而非'swiper-slide' - 正则未加锚点：
/bg-blue-500/会匹配my-bg-blue-500-text，应写/^bg-blue-500$/或更稳妥的/^(?:hover|focus|group-hover|data)-/ - Tailwind 变体（
md:text-red-500、dark:bg-gray-800）必须显式列入：/^(?:md|lg|dark|hover):text-red-(?:500|600)$/ - 属性选择器（
[data-state=open]）、嵌套语法（[&_svg]）默认提取器不识别，得加/\[.*\]/或升级 Tailwind 到 v3.3+ 用原生 content 提取逻辑
keyframes、font-face、动态类名这些容易被连带清除
默认配置下，@keyframes 和 @font-face 会被 PurgeCSS 当作无用规则一并删掉，页面动画消失、字体加载失败。这不是 bug，是默认行为。
- 必须显式启用：
keyframes: true和fontFace: true - 动态拼接类名（
className={`modal ${isOpen ? 'is-open' : ''}`}）无法靠扫描捕获，只有三个选择：列全所有可能值进safelist、用正则兜底（如/{ pattern: /is-(open|closed)/ }）、或换支持 AST 的提取器（成本高，不推荐） - 别在
devtool: 'source-map'开启时跑 PurgeCSS——source map 会污染类名匹配，导致漏删或误删
真正难的不是“怎么配”，是确认所有动态类都落在 PurgeCSS 的视野里——它不猜、不执行、不推断，只信你给它的字符串和正则。上线前务必检查 DOM 元素是否缺失样式，尤其关注第三方组件、SSR 渲染差异、以及夜间模式/响应式断点切换后的 class 变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
