开--style=compressed不能解决css过大问题，它仅删空格、换行、注释和冗余分号；真正膨胀源于@extend爆炸、@import全量引入、嵌套过深、工具类泛滥，压缩只是“瘦脸”而非“抽脂”。
开 --style=compressed 不能解决 CSS 文件过大问题，它只删空格换行、注释和冗余分号；真正膨胀来自源码结构失控——比如 @extend 爆炸、@import 全量引入、嵌套过深、工具类泛滥。压缩只是最后一道“瘦脸”，不是“抽脂手术”。
为什么开了 compressed 模式体积还是很大
因为 Dart Sass 的 --style=compressed 不做逻辑优化：不合并重复声明、不剔除未用选择器、不折叠相同属性块。它只会把 .btn { margin: 1rem; padding: 0.5rem; } 压成 .btn{margin:1rem;padding:.5rem}，但若你写了 50 个类似规则，它就压成 50 行挤在一起的一行。
常见错误现象：
- 输出 CSS 中反复出现同一组声明（如
font-weight: 600出现 37 次） -
gzip -c main.css | wc -c后仍远超预期（说明内容冗余，不是格式问题） - 开启了
sourceMap：base64 字符串直接加在文件末尾，体积+100KB+
必须禁用 sourceMap 才能让 compressed 有效
sourceMap 和 --style=compressed 天然冲突：前者需要保留原始结构映射，后者把所有内容压成一行，导致映射错位甚至失效。更重要的是，它会往 CSS 文件末尾追加大量 base64 字符串，体积暴增。
实操要点：
- 命令行编译时显式加
--no-source-map，别信默认值 - Webpack 项目中，在
sassOptions里设sourceMap: false，且必须写在css.loaderOptions.sass下，不是顶层配置 - Vite 用户注意：
css.devSourcemap默认为true，上线构建前务必关掉
@use 替代 @import 是模块化瘦身的关键一步
@import 是文本拼接，哪怕只调用 px2rem(12)，也会把整个 _utils.scss（含未用的 @mixin clearfix、一堆变量）全塞进输出；@use 则按需加载，只引入被引用的部分，并自动加命名空间隔离。
迁移注意事项：
- 必须用 Dart Sass ≥1.23.0；
node-sass已废弃，不支持@use -
@use "colors" as color后，必须写color.$primary，不能直接写$primary - 第三方库（如 Bootstrap 5）若未切
@use，可暂时混用，但加载顺序要明确：先@use自己模块，再@import第三方 - 旧项目可用
sass-migrator module --verbose自动改写，别手改
模块拆分后仍要防“假瘦身”：检查是否真按需
拆成 _buttons.scss、_forms.scss 不等于体积下降。如果每个文件都 @import "_variables" 或 @use "mixins"，而这些基础模块本身又互相依赖，最终仍是全量打包。
验证是否真瘦身：
- 编译时加
--style=expanded输出可读 CSS，搜索.btn是否带出_forms.scss里的input[type="text"]样式——若有，说明模块边界没切开 - 用
grep -r "@import" src/styles/检查是否还有残留的@import（尤其在第三方封装层） - 构建后打开
main.css，搜%clearfix或@extend相关字符串——若存在，说明占位符仍在触发选择器爆炸
最容易被忽略的是：模块拆分之后，@use 路径没配 includePaths，导致开发者偷偷补了相对路径 @use "../colors"，结果破坏了统一入口管理，也埋下循环依赖隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
