purgecss未生效主因是content路径未全覆盖class来源文件，需确保包含所有模板、脚本及html文件，并在生产环境经postcss流程运行，且必须配置safelist防误删。

content 路径没覆盖所有 class 来源文件

PurgeCSS 不会自己猜你写了哪些类，它只从 content 配置的路径里提取字符串。漏掉一个扩展名或目录，就可能让整批类名“隐身”。

• Vue 项目必须包含 ./src/**/*.{vue,js,ts,tsx} 和 ./public/index.html，漏掉 .vue 就扫不到模板里的 class="btn btn-primary"
• Next.js App Router 要加 ./app/**/*.{js,ts,jsx,tsx}；Pages Router 还得补 ./pages/**/*.{js,ts,jsx,tsx}
• JSX/TSX 中的 className 是重点扫描对象，但写成 ./src/**/*.js 会跳过 .tsx，结果 text-blue-500 全被保留
• 服务端渲染的 HTML 模板（如 pages/**/*.html.ejs 或 data/**/*.mdx）若不在 content 里，生成的 class 就算真实存在也会被删

构建没走生产环境，PurgeCSS 根本没运行

绝大多数打包工具（Webpack/Vite/Next.js）默认只在 NODE_ENV === 'production' 时启用 PurgeCSS。开发模式下它直接跳过，所以 npm run dev 看着正常，npm run build 后却体积不变——其实是压根没执行。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 检查构建命令是否显式设了环境变量，比如 NODE_ENV=production npm run build
• Vite 用户注意：插件配置中需明确 apply: 'build'，否则开发服务器也会误启
• Webpack 用户确认 PurgeCSSPlugin 是否包裹在 mode === 'production' 判断里

CSS 没经过 PostCSS 流程，插件没机会介入

PurgeCSS 是 PostCSS 插件，不是独立 CLI 工具。如果 CSS 文件没走 postcss-loader（比如只用了 css-loader + MiniCssExtractPlugin），那它根本收不到输入。

• Webpack 配置中，module.rules 的 CSS 处理链必须含 postcss-loader，且顺序在 css-loader 之后、MiniCssExtractPlugin.loader 之前
• Vite 用户确认 vite.config.ts 中是否启用了 css.postcss 配置项，而非仅靠依赖自动识别
• 直接对 .scss 文件跑 PurgeCSS 无效——它只处理已编译的 .css，不解析源码

没设 safelist，关键类被误删导致样式崩，你不敢关它

一旦上线后按钮透明、下拉菜单不展开、响应式断点失效，很多人第一反应是“PurgeCSS 有问题”，于是注释掉配置——结果体积当然不变。实际是没设白名单，删得太狠，只能退回去用全量 CSS。

• 静态保底：至少加 ['modal-open', 'toast-show', 'swiper-initialized'] 这类 JS 控制的类
• 正则兜底：Tailwind 用户加 { pattern: /^text-/ } 和 { pattern: /^bg-(blue|gray)-[0-9]+$/ }，避免宽泛匹配 /^bg-/
• 第三方组件：比如 react-datepicker 渲染的 react-datepicker__day，必须手动进 safelist 或显式扫描其 node_modules/react-datepicker/**/*.js

PurgeCSS 不是开关一按就瘦身的黑盒，它依赖你把 class 的“使用证据”完整暴露给它。路径漏一个、环境错一次、流程断一环、白名单空着——四个地方任一出问题，结果都是 CSS 体积纹丝不动。最常被忽略的是：你看到的“没变化”，往往不是它没干活，而是它删完后你发现页面崩了，又悄悄把它禁用了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！