scss动态类名不会出现在purgecss扫描结果中，因其仅提取html/js中字面量字符串，而@each、#{$color}等编译前sass语法不被识别；必须通过正则白名单（如/^bg-/）显式保留，且postcss插件须置于cssnano之前以确保处理原始类名。
SCSS动态类名根本不会出现在PurgeCSS扫描结果里
PurgeCSS只提取文件中字面量字符串，而SCSS的@each、@for、#{}插值生成的类名（比如.bg-#{$color}）在编译前只是Sass语法，编译后才变成真实CSS——但PurgeCSS不处理SCSS源码，它看到的是编译后的CSS文件，而那个阶段类名早已固化，且不在content指定的HTML/JS模板里。
常见错误现象：.bg-red、.text-sm等动态生成的工具类全没了；@import "utils.scss"里循环产出的.p-1到.p-12只剩一半。
- 别指望PurgeCSS能“读懂”SCSS逻辑——它连
$spacing: (1: 0.25rem, 2: 0.5rem)这种map都当注释忽略 - 如果你用
font: #{$size}/#{$lh} sans-serif这类带/的写法，SCSS编译可能直接报错，导致整个CSS没产出，PurgeCSS自然扫不到任何东西 - 真正被删的不是“动态类”，而是那些没在
content路径里硬编码出现过的类名字符串
SCSS里写死的类名也可能被误删
哪怕你在SCSS里写了.btn-primary { ... }，只要content没扫到"btn-primary"这个字符串，它照样被清掉。PurgeCSS不管CSS里有没有定义，只认“谁在模板里调用了它”。
使用场景：你把所有Bootstrap工具类都@include进一个base.scss，但HTML里没写class="btn-primary"，只靠JS拼接el.className = 'btn btn-' + type——那btn-primary就永远不会出现在扫描文本里。
- 必须把SCSS生成的类名显式加进
safelist，比如/^btn-/、/^p-/、/^text-/ - 别只加
'btn-primary'——动态值一多，单个字符串保不住 - 如果用了
@apply（比如Tailwind），确保content路径包含所有用到@apply的SCSS文件，否则@apply bg-red-500这种也会被漏掉
PostCSS插件顺序让SCSS和PurgeCSS彻底脱节
SCSS编译（sass-loader或postcss-scss）通常发生在PostCSS链早期，而PurgeCSS插件如果放在cssnano之后，它处理的已经是压缩过、选择器重命名过的CSS——根本找不到原始类名。
错误配置示例：postcss.config.js里把@fullhuman/postcss-purgecss写在cssnano后面，结果构建后CSS只剩@charset "UTF-8";。
- 正确顺序必须是：
postcss-import→postcss-scss（如有）→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano要关掉discardUnused: true，否则它会二次清理已被PurgeCSS删掉的选择器，导致空规则或损坏输出 - Webpack用户更推荐
purgecss-webpack-plugin，它能在CSS提取之后、压缩之前介入，比PostCSS插件更贴近真实产物
SCSS变量和混合宏里的类名无法被静态提取
像@mixin button-variant($bg, $border) { .btn-#{$bg} { background: $bg; } }这种写法，.btn-red只存在于编译时上下文，PurgeCSS既看不到$bg的值，也看不到#{}展开结果。
容易踩的坑：你写了几十个@include button-variant(red)，但PurgeCSS日志里rejected列表里全是.btn-red——因为它压根没在任何.html或.js里见过这个字符串。
- 唯一可靠办法是用正则白名单：
/^btn-/、/^bg-/、/^shadow-/ - 如果SCSS里用了
[data-theme="dark"] .text-primary这类属性选择器，也要加/^data-theme/到safelist，否则PurgeCSS会把它当未使用删掉 - 别依赖
defaultExtractor去解析SCSS——它的默认提取器只认HTML/JS字符串，对Sass语法完全无感
safelist兜底），哪些是运行时注入的（得靠框架适配或额外注入路径）。漏掉任何一个前缀，线上就少一块样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
