PurgeCSS如何自动删除生产环境中的冗余CSS代码？

本文共计958个文字，预计阅读时间需要4分钟。

基本原理并非错误判断，而是它默认只扫描 ``、`js`、`jsx`、`vue` 等文件中的字符串——动态拼接的类名、运行时生成的类、或通过 JS 注入的 class（如 `el.classList.add('hidden')`）——它本质上视而不见。

• 常见错误现象：hidden、active、is-open 这类通用工具类突然失效
• 使用场景：React/Vue 中用变量拼接 class（className={`btn ${type}-btn`}），或 Tailwind 的 @apply + 动态值
• 解决方法必须显式告诉 PurgeCSS 哪些内容要保留：content 配置里加 glob 路径，或用 defaultExtractor 自定义提取逻辑
• 别依赖“扫描整个项目”，太慢还容易漏；优先写明确的 content 数组，例如：['./src/**/*.{js,ts,jsx,tsx,vue}']

PurgeCSS 和 PostCSS 插件顺序错位导致白屏

如果你在 postcss.config.js 里把 purgecss 放在 autoprefixer 或 cssnano 后面，就可能出问题：前者删类，后者压缩时又把已删掉的选择器相关声明合并/优化，最终产出空规则或损坏的 CSS。