--style=compressed 仅删除块注释和部分空白,不合并选择器、不压缩calc()、不处理行注释;真正最小化需PostCSS+cssnano。

--style=compressed 能删空行和注释,但仅此而已——它不合并选择器、不剔除重复声明、不压缩 calc() 或自定义属性,别把它当 cssnano 用。
为什么 --style=compressed 看起来没效果?
常见错误现象:执行 sass input.scss output.css --style=compressed 后,CSS 文件体积几乎没变小,甚至开发者工具里还能看到原始注释。
- 你可能用了
@import或@use引入了带//行注释的 SCSS 文件——--style=compressed只删/* */块注释,不处理行注释 - 源文件里有大量空行或缩进(尤其嵌套深时),
--style=compressed会保留换行符位置逻辑,只移除“无意义”的空白,不是全文压成一行 - 你在 VSCode 用 Live Sass Compiler 插件但没改
liveSassCompile.settings.formats,插件默认走expanded格式,--style参数根本没生效
怎样让 --style=compressed 真正起作用?
它只在命令行直调或明确被构建工具透传时才生效;多数前端工具链(Vite/Webpack)默认不把该参数传给 Sass 编译器。
- 命令行单文件编译:确保写全路径和参数,例如
sass src/main.scss dist/main.css --style=compressed --no-cache - Vite 项目中:必须在
vite.config.ts的css.preprocessorOptions.sass里加api: 'dart-sass',否则 Vite 默认用内置简易处理器,忽略--style - Webpack +
sass-loader:options.sassOptions里设style: 'compressed',但注意这仅影响 Sass 层输出,后续还需css-minimizer-webpack-plugin做二次压缩
空行和注释残留的真实来源
很多“多余空行”其实来自 SCSS 语法本身,比如 & 嵌套块、@at-root 拆分、多行 @media 查询,这些在 --style=compressed 下仍会生成换行——它不重排结构,只做 token 级删减。
立即学习“前端免费学习笔记(深入)”;
-
//行注释不会被移除,必须手动改成/* */才能被--style=compressed清掉 - SCSS 中用
@debug或@warn输出的内容不会进 CSS,但若误写成/* @debug ... */,就会残留为注释 - 某些 mixin 里拼接字符串生成的空行(如
#{""}或未闭合的插值),--style=compressed无法识别,得靠重构逻辑
真正要消灭空行和注释,得接受一个事实:--style=compressed 是 Sass 的“轻量开关”,不是构建终点。只要项目用了现代打包工具,就该把压缩交给 PostCSS 阶段——那里才能安全合并选择器、剔除无效规则、统一处理注释策略。


















