必须显式配置sassoptions.outputstyle: 'compressed'且sourcemap: false，因sass默认outputstyle为'nested'、sourcemap默认开启，二者不随环境自动切换；若未手动设置，scss层输出冗余expanded格式并附加base64映射，导致后续压缩事倍功半。
只配 sass --style=compressed 不会真正减小 CSS 体积，它只删空格、换行、注释和冗余分号；真正压缩必须靠 PostCSS（如 cssnano）在 Sass 编译之后介入，且两者不能混为一谈。
为什么 --style=compressed 后文件体积几乎没变
因为 Dart Sass 的 --style=compressed 不做逻辑优化：不合并重复声明、不剔除未用选择器、不简化 calc()、不简写颜色或数值（如 #ff0000 → #f00）。它只会把：
.btn { margin: 1rem; padding: 0.5rem; }
压成：
.btn{margin:1rem;padding:.5rem}
但如果源码里有 50 个类似规则，输出就是 50 行挤在一起的一行——内容没少，只是格式紧了。
常见错误现象：
-
grep -o "margin:" main.css | wc -l返回异常高的数字（比如 47 次），说明是源码结构问题，不是格式问题 -
gzip -c main.css | wc -c后仍远超预期，证明冗余在语义层，不在空格层 - 开启了
sourceMap，base64 字符串直接追加在 CSS 文件末尾，体积暴增 80–150 KB
Webpack 中 sass-loader 必须显式设 outputStyle: 'compressed'
sass-loader 默认不压缩，outputStyle 默认值是 'nested'，不是 'compressed'。它不感知 mode: "production"，也不会被后续插件反向影响。漏配这项，等于让 css-minimizer-webpack-plugin 对一堆带缩进的 CSS 做无用功。
正确写法（Webpack 原生配置）：
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: 'compressed',
sourceMap: false
}
}
}]
}]
}
关键点：
-
sassOptions必须嵌套在loader.options下，写在顶层或optimization里会被忽略 -
sourceMap: false是硬性要求，不是可选项；否则 base64 映射内容白送 100 KB+ - 别在
additionalData里留@debug或冗余注释——它们不会被压缩，只会原样保留
Vite 或命令行直跑时，--no-source-map 是上线必加项
Vite 默认开启 css.devSourcemap，即使你配了 postcss.config.js，若没显式关掉 sourcemap，Sass 阶段仍会往 CSS 末尾塞 base64。命令行直跑更危险：sass 命令的 --source-map 默认行为因版本而异，有些默认开，有些默认关——不能赌。
安全写法：
npx sass src/main.scss dist/main.css --no-source-map --style=compressed
Vite 用户需在 vite.config.ts 中显式关闭：
export default defineConfig({
css: {
devSourcemap: false,
postcss: {}
}
})
注意：
-
.scss文件默认不走 PostCSS，必须确保postcss.config.js存在，且 Vite 的css.postcss配置已启用 -
--load-path node_modules对cssnano完全无效——Sass 不识别 PostCSS 插件 - 调试阶段切回
outputStyle: 'expanded'并配devtool: 'source-map'，样式定位足够用
最容易被忽略的是：压缩链断裂比没压缩更糟——比如 Sass 输出 expanded 格式，PostCSS 却误以为它是“已处理完”的最终产物，跳过关键优化；或者 @extend 导致选择器爆炸，让 cssnano 的合并逻辑完全失效。体积问题从来不在“怎么压”，而在“谁先压、压什么、压到哪一层”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
