设outputstyle: 'compressed'仅控制sass输出格式，不保证最终css被压缩；需配合css-minimizer-webpack-plugin等工具在构建流程中真正执行压缩，且避免与vite的css.minify冲突。
直接设 outputStyle: 'compressed' 不保证生成压缩版 CSS —— 它只控制 Sass 本身的输出格式，而最终文件是否被压缩，取决于构建流程中有没有真正执行这一步，以及是否被其他环节覆盖或忽略。
Webpack 中 sass-loader 的 compressed 设置为何不生效
很多人在 sassOptions 里写了 outputStyle: 'compressed'，但构建后 CSS 文件仍是未压缩的。这不是配置错了，而是没理解 sass-loader 的定位：它只负责把 SCSS 编译成 CSS 字符串，不负责写入文件、也不触发后续压缩。
- 如果用了
MiniCssExtractPlugin，它默认把 CSS 提取为独立文件，但不会自动调用压缩逻辑 —— 必须额外配css-minimizer-webpack-plugin - 如果只靠
css-loader+style-loader，那 CSS 根本不落地为文件，outputStyle压缩效果也看不到 -
sassOptions.outputStyle在开发环境（mode: 'development'）下常被 Webpack 忽略，只在production模式下起作用
Vite 项目里 css.minify 和 Sass 的 compressed 冲突吗
会。Vite 默认对 .scss 文件走的是内置 Sass 编译器 + esbuild CSS 压缩链，css.minify: 'esbuild' 或 'lightningcss' 已经接管了最终压缩，此时再在 sassOptions 里设 outputStyle: 'compressed' 属于重复劳动，还可能干扰 source map 映射。
- 推荐做法：Sass 层保持
outputStyle: 'expanded'（便于调试），压缩交给 Vite 的css.minify -
lightningcss比 esbuild 压缩率更高，且支持content字段做安全裁剪，比手动配 PurgeCSS 更稳 - 若你启用了
css.preprocessorOptions.sass并设了outputStyle，记得确认 Vite 版本 ≥ 4.5 —— 旧版本不识别该字段
命令行编译时 --style=compressed 却输出了带空格的 CSS
常见于路径或输入方式不对。Dart Sass 要求明确指定输入输出，否则 fallback 到默认行为（expanded）。
- 错误写法：
sass input.scss --style=compressed→ 只打印到 stdout，没写文件，且某些终端会强制美化输出 - 正确写法：
sass input.scss output.css --style=compressed --no-source-map - 漏掉
--no-source-map会导致 base64 source map 插入末尾，反而让文件变大 - 如果用的是 Live Sass Compiler 插件，要检查
liveSassCompile.settings.formats里的format是否真设成了"compressed"，不是"compact"或拼错
最容易被忽略的一点：compressed 模式本身不处理语义冗余 —— 它删空格、换行、注释，但不会合并重复规则、不会剔除未用变量、也不会简化 @extend 导致的选择器爆炸。体积问题卡在源码结构上，而不是开关没开对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
