purgecss不能处理scss源文件，只作用于编译后的css；必须确保scss先完成编译，再由purgecss扫描html/js/vue等模板中出现的类名并裁剪未使用规则。
PurgeCSS 不能直接处理 SCSS 源文件，它只作用于最终生成的 CSS 字符串；你必须确保它在 SCSS 编译完成、CSS 输出为纯文本之后再运行，否则它什么也删不掉。
SCSS 编译后 CSS 才是 PurgeCSS 的输入目标
PurgeCSS 不认识 .scss 文件里的 @import、@mixin 或变量，它只解析已编译的 CSS 内容。如果你把 src/**/*.scss 加进 content 配置，它会跳过——因为 SCSS 文件里没有可提取的类名字符串（比如 class="btn"）。真正要扫的是 HTML/JSX/Vue 中的模板，以及最终输出的 CSS 文件（由 Sass 编译器生成）。
- SCSS 编译必须在 PurgeCSS 前完成：Webpack 中需确保
sass-loader→css-loader→MiniCssExtractPlugin→purgecss-webpack-plugin的顺序 - 不要把
node_modules/**/*.scss加进content，它不会帮你提取 Bootstrap 的.btn类——那些类根本不在 SCSS 源码里“写死”，而是在编译后的 CSS 中 - 若用 Vite，
vite-plugin-purgecss默认在 CSS 构建阶段介入，但需确认它 hook 在build.rollupOptions.plugins且晚于vue()或react()插件
content 配置必须覆盖所有动态类名来源
SCSS 本身不生成运行时类名，但你的组件模板会。PurgeCSS 是否删错，取决于它能不能从 JS/TS/Vue 文件中抓到所有实际出现的类字符串——尤其是那些被 SCSS 编译后最终挂到 DOM 上的。
- 必须包含：
src/**/*.html、src/**/*.js、src/**/*.ts、src/**/*.tsx、src/**/*.vue（缺一不可） - 若用了 Pug、Nunjucks、Blade 等模板引擎，也要加对应路径，例如
src/**/*.pug - 动态拼接类名如
className={`btn ${size}-btn`}会被漏掉，除非你配safelist: [/^btn-/, /^size-/]或改用defaultExtractor支持正则提取 - Tailwind 用户请直接用
tailwind.config.js的content字段，它内置 AST 解析，比 PurgeCSS 默认提取器更可靠
第三方 SCSS 库（如 Bootstrap）的类名必须手动 safelist
你 @import 'bootstrap/scss/bootstrap' 后，SCSS 编译器会把所有规则吐进最终 CSS，但 PurgeCSS 完全不知道你用了 .alert 还是 .carousel——除非你在模板里写了 class="alert"，或显式告诉它保留。
- Bootstrap 常见前缀：
[/^alert-/, /^btn-/, /^modal-/, /^carousel-/] - Ant Design SCSS 版本（非 CSS-in-JS）：加
['ant-btn', 'ant-table', 'ant-modal']，注意前缀必须和你源码中写的完全一致 - 禁用
fontFace: true和keyframes: true，否则 SCSS 编译出的@font-face或@keyframes可能被清空（尤其 Bootstrap 的动画） - 别把
node_modules/**/*加进content—— PurgeCSS 不会从bootstrap.scss里提取类名，它只认字符串字面量
最易被忽略的一点：PurgeCSS 对 SCSS 的“支持”其实是零——它只管最终 CSS 字节流和源码中的 class 字符串。如果你没让 SCSS 编译完、没把模板路径扫全、又没给第三方库设 safelist，那它删掉的不是“未引用 CSS”，而是你根本没告诉它“哪些算引用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
