purgecss扫不到sass编译出的css里的类，因其仅按配置的css参数读取文件，若未将dist/css/app.css等编译产物设为输入，而误用bootstrap.min.css，则无法提取有效选择器；必须确保sass编译早于purgecss执行、输出路径真实存在、禁用source-map、content覆盖所有动态类来源，并配置safelist正则及正确postcss顺序。
为什么 PurgeCSS 扫不到你 Sass 编译出的 CSS 里的类
PurgeCSS 不会自动读取你 main.scss 编译后的 CSS 文件——它只按你配置的 --css 或 css 参数去读，而多数人误把 bootstrap.min.css 当输入，却没把 dist/css/app.css（即你 sass 编译产出）喂给它。结果就是：扫了 0 个有效选择器，删了 0 行。
关键点在于：PurgeCSS 的输入必须是你自己编译生成的、未压缩的、含完整类名的选择器列表；它不解析 Sass 源码，也不处理 node_modules 中的预编译 CSS。
- 确认构建流程中
sass编译早于 PurgeCSS 运行（例如 Webpack 里SassLoader→MiniCssExtractPlugin→purgecss-webpack-plugin） - 检查输出路径是否真实存在且可读：
dist/css/app.css不能是空文件或 404 - 禁用
devtool: 'source-map'，否则 source map 注释会污染类名提取（比如把.btn变成.btn/*# sourceMappingURL=...*/）
content 配置必须覆盖所有动态类名来源
你写 className={`d-${show ? 'block' : 'none'}`}，PurgeCSS 默认只看到字符串 "d-"，根本不会提取 d-block 或 d-none。它不执行 JS，只做字面量匹配。
所以 content 列表不能只扫 .html，必须包含所有可能拼接类名的地方：
- 绝对路径优先：
path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}') - 显式加入框架模板文件：
src/**/*.svelte、src/**/templates/*.html - 若用了 JS 注入 CSS 的插件（如
vite-plugin-css-injected-by-js），它的输出也要加进content数组，否则全被清空 - 避免
glob.sync('./src/**/*.vue')：Windows 路径分隔符不兼容，且 glob 在某些构建上下文中不可靠
safelist 是保命线，不是可选项
Bootstrap 的 data-bs-toggle、Tailwind 的 hover:bg-blue-500、Vue 的 :class="{ 'is-open': isOpen }" —— 这些都不会被默认提取器识别。不加 safelist，它们大概率被删光。
正确写法不是列一堆类名，而是用正则兜住模式：
-
/^(d|text|bg|border|flex)-/（覆盖 Bootstrap 响应式类和 Tailwind 基础工具类） -
/^data-bs-/（保留所有 Bootstrap 5.3 的 data 属性绑定） -
/\[.*\]/（匹配[data-state=open]这类属性选择器） -
['modal', 'tooltip', 'popover']（精确保留组件根类，注意大小写和连字符） - 启用
keyframes: true和fontFace: true，否则@keyframes spin和@font-face会被连带清除
PostCSS 插件顺序错一位，整个 CSS 就变空
常见现象：构建后 CSS 文件只剩 @charset "UTF-8";，或者 Lighthouse 显示 “CSS 规则数为 0”。基本就是 PostCSS 插件链崩了。
必须严格按此顺序排列（尤其在 postcss.config.js 中）：
-
postcss-import（合并 @import） -
tailwindcss（如有，生成工具类） -
@fullhuman/postcss-purgecss（此时 CSS 已展开，类名完整） -
autoprefixer（补前缀） -
cssnano（压缩，且必须关掉discardUnused: { discardUnused: false }，否则二次误删）
如果用了 purgecss-webpack-plugin，就别在 postcss.config.js 里再配 @fullhuman/postcss-purgecss——重复注入会导致冲突，清空全部规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
