单纯开--style=compressed不能解决Sass编译后CSS过大问题，真正有效路径是编译前控制源码冗余+编译后用PurgeCSS裁剪未用规则；因PurgeCSS必须在Sass编译后介入，才能基于HTML/JS/Vue等模板内容扫描并删除未使用的完整选择器，而compressed仅删空格换行、不处理逻辑冗余。
单纯开 --style=compressed 不能解决 Sass 编译后 CSS 过大问题，真正有效的路径是：编译前控制源码冗余 + 编译后用 PurgeCSS 裁剪未用规则。
为什么 PurgeCSS 必须在编译后介入
Sass 的 @extend、深层嵌套、原子类（如 .text-sm）这些写法，在编译阶段就已生成完整选择器。压缩模式（compressed）只删空格换行，不删逻辑冗余；而 PurgeCSS 是基于实际 HTML/JS/Vue 等模板内容做“使用痕迹扫描”，把没出现在任何模板里的 CSS 规则整条干掉。
- 它无法处理 Sass 源码级的重复（比如多个文件都
@import "mixins"导致同一段@mixin被展开多次），所以得先靠stylelint控制源码质量 - 若用
Vue或React，必须配置content字段覆盖所有组件路径，例如src/**/*.{vue,js,jsx,ts,tsx}，漏一个文件，里面用到的类就保留在最终 CSS 里 - 不要对
.scss文件直接跑PurgeCSS—— 它只认编译后的 CSS 和模板，输入必须是已生成的.css+ 模板集合
PurgeCSS 在 Webpack 中容易配错的三个点
常见错误不是插件没装，而是路径或上下文没对齐：
-
paths配置写成['./src/**/*.html']，但项目用的是.vue单文件组件 → 应该写['./src/**/*.{vue,html,js}'] - 用了
MiniCssExtractPlugin，但PurgeCSS插件放在它之前 → 实际处理的是未提取的内联样式块，不是最终 CSS 文件；顺序必须是：MiniCssExtractPlugin→PurgeCSS→CssMinimizerPlugin - 开发环境也启用了
PurgeCSS→ 热更新时模板路径变化快，容易误删正在编辑的样式；建议只在mode === 'production'时启用
和 UnoCSS / Tailwind JIT 的关键区别在哪
三者都裁剪未用样式，但触发时机和适用场景不同：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
PurgeCSS是“后置扫描”：构建完成 → 扫描模板 → 删除未用规则 → 输出精简 CSS；适合传统架构、已有大量手写类名的项目 -
UnoCSS是“按需生成”：读取模板 → 动态生成仅需的原子类 CSS → 不依赖预定义工具类文件；适合 Vue/React + 原子类偏好者，且支持shortcuts和presets -
Tailwind JIT（v3+ 默认）本质也是按需，但强绑定 Tailwind 生态；如果你没用tailwind.config.js，就别硬套它 - 混用风险：同时开
PurgeCSS和UnoCSS可能导致二次裁剪，比如UnoCSS已生成的.p-4被PurgeCSS当作未用删掉 —— 二者选其一即可
别忽略 keyframes 和 @layer 的例外情况
PurgeCSS 默认会删掉所有未被 JS/HTML 显式调用的 @keyframes 名称，哪怕你在 CSS 里写了 animation: spin 1s infinite，只要 spin 没在模板字符串或 JS 里出现过，就会被删。
- 解决方案：在
purgecss配置中加keyframes: true，或显式声明白名单rejectedKeys: ['spin', 'bounce'] -
@layer utilities类规则，如果没在模板里以字符串形式出现（比如class="bg-red-500"），也会被误删；确保你写的原子类名真实出现在模板中，而不是只存在@apply里 - 动态 class 名（
:class="['text-' + size]".）需要配置defaultExtractor或正则白名单，否则text-lg、text-xl全部消失
体积问题从来不在压缩开关上，而在你每次敲 @extend、写五层嵌套、或生成 10201 个 .m-0-0-0-0 类时，有没有意识到浏览器要加载并解析它们——PurgeCSS 是最后一道防线，不是免死金牌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
