PurgeCSS 不处理 SCSS 源文件，仅作用于最终 CSS 字符串；.btn-secondary 若仅存在于 SCSS 中且未在 JS/HTML/Vue 等 content 文件中以字符串形式出现，则不会被识别为已用类，故无法删除——它根本未进入扫描范围。
PurgeCSS 不能直接处理 SCSS 源文件，它只作用于最终生成的 CSS 字符串；SCSS 编译必须在 PurgeCSS 之前完成。
为什么 purgecss-webpack-plugin 会漏删 SCSS 里实际未用的规则？
常见现象是：SCSS 文件里写了 .btn-secondary，但整个项目都没引用它，构建后 CSS 里却还留着——这不是 PurgeCSS 失效，而是它根本没看到这个类名出现在 content 扫描范围内。
原因很直接：
- SCSS 编译阶段（
sass-loader）生成的 CSS 是“中间产物”，不参与 PurgeCSS 的 content 扫描；PurgeCSS 只认你显式列在content或paths里的 JS/TS/HTML/Vue 等源码文件 -
.btn-secondary如果只存在于 SCSS 文件中、没在任何模板或 JSX 中以字符串形式出现（如class="btn-secondary"或className="btn-secondary"），它就不会被提取为“已使用类名” - 也就是说：PurgeCSS 不分析 SCSS 语法树，也不反向追踪
@include或@extend的调用链
postcss-purgecss 在 SCSS 项目中必须放在 sass-loader 之后
如果你用 postcss-loader 链路（比如 Vue CLI 或自定义 Webpack），@fullhuman/postcss-purgecss 必须排在 sass-loader 和 postcss-loader 的其他插件之后，否则它拿到的是未编译的 SCSS 字符串，无法解析选择器。
立即学习“前端免费学习笔记（深入）”；
正确顺序示例（webpack.config.js）：
module: {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('sass')(), // 实际应由 sass-loader 处理，此处仅为示意逻辑
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
content: [path.join(__dirname, 'src/**/*.{js,ts,jsx,tsx,vue}')],
safelist: [/^swiper-/, /^ant-/]
})
]
}
}
},
'sass-loader'
]
}]
}
⚠️ 注意：sass-loader 必须在 postcss-loader 之后（即执行顺序从下往上），才能确保传给 PurgeCSS 的是已编译的 CSS。
SCSS 中的动态类名（如 @each、@if）必须手动加入 safelist
SCSS 常见写法：@each $size in (sm, md, lg) { .btn-#{$size} { ... } }，生成 .btn-sm、.btn-md 等。PurgeCSS 默认提取器不会识别这种插值，除非你明确告诉它这些类名可能被用到。
安全做法是加正则白名单：
-
safelist: [/^btn-/, /^text-/, /^bg-/]—— 覆盖 Tailwind 或自定义工具类前缀 - 避免写
/btn-/这种不带锚点的正则，它会误匹配.sub-btn-active - 若 SCSS 里用了属性选择器（如
[data-size]），也要加/^\[.*\]$/，否则会被删
真正难的不是配置 PurgeCSS，而是让 SCSS 类名“可见”
SCSS 文件本身永远不在 PurgeCSS 的 content 扫描路径里——它只负责输出，不负责声明使用。所以所有“潜在会被用到但没在 JS/HTML 里明文写出”的类，都得靠 safelist 喂进去，或者改写成可静态提取的形式（比如把 @each 循环结果导出为常量对象，在 JSX 中引用）。
别指望 defaultExtractor 能自动识别 SCSS 插值；也别把 glob.sync('./src/**/*.scss') 加进 content 数组——它只会扫出空结果，因为 SCSS 里没有可提取的 class 字符串。
