必须显式设置sassoptions.outputstyle: 'compressed'并禁用sourcemap，否则sass默认输出'nested'格式且sourcemap默认开启，导致后续压缩插件只能处理冗余文本和base64映射内容，体积优化从第一步即失效。
直接引入编译后的 CSS 文件本身不会控制体积——体积由 Sass 源码结构、编译配置和后续处理共同决定。关键不是“怎么引”，而是“怎么让引进去的东西足够瘦”。
为什么 import 或 @import 后的 CSS 体积失控
常见错误现象：main.css 里反复出现 margin: 0.5rem 47 次，或 .btn 相关选择器爆炸式增长；gzip -c main.css | wc -c 显示压缩后仍超预期。
-
@import是文本拼接，哪怕只调用px2rem(12)，也会把整个_utils.scss（含未用的@mixin clearfix、一堆变量）全塞进输出 - 嵌套超过 4 层（如
.card { .list { .item { &:hover { } } } }）会复制父选择器前缀，规则数呈指数增长 -
@extend %btn-base在 5 个上下文调用，生成.header .btn、.modal .btn等 5 条独立规则，而非复用同一份声明 - 循环生成工具类：
@for $i from 1 through 100 { .m-#{$i} { margin: #{$i}px; } }直接产出 100 条规则，compressed只是把它们挤成一行
sassOptions.outputStyle: 'compressed' 必须显式写死
它不是默认值，也不随 mode: "production" 自动切换。漏掉这步，Sass 默认输出 nested 格式，后续所有压缩插件（cssnano、css-minimizer-webpack-plugin）都只能在“胖输出”上徒劳加工。
- Webpack 项目：必须写在
module.rules.use[loaderIndex].options.sassOptions下，不能放顶层或optimization.minimizer配置里 - Vue CLI：要嵌套在
css.loaderOptions.sass.sassOptions里 - 验证方式：临时改成
'expanded'，观察编译出的 CSS 是否突然带缩进、换行、空行——如果是，说明配置生效了 - 注意：
outputStyle: 'compressed'不合并重复声明、不剔未用类，它只删空格、换行、注释
sourceMap: false 是硬性要求，不是可选项
开启 sourceMap 会让每个 SCSS 文件生成 base64 编码的映射内容，直接追加在最终 CSS 文件末尾。中等项目轻松增加 80–150 KB，gzip 后几乎不压缩——因为 base64 是高熵内容。
- 别信某些文档说的“默认关闭”，dart-sass v1.82.0 仍默认
true -
MiniCssExtractPlugin只控制是否提取 CSS 文件，不干预sass-loader是否注入 map 内容 - 开发调试应由 Webpack 的
devtool: 'source-map'统一提供 JS 层 sourcemap，样式定位已足够覆盖 - Vite 用户注意：
css.devSourcemap默认为true，上线构建前务必关掉
真正减体积的三件事比“怎么引”重要得多
压缩只是收尾动作；体积瓶颈永远在源码结构和构建链路上。
- 停用
@extend：尤其别对带伪类（:hover）、媒体查询（@media）、上下文依赖（.card &）的占位符使用；改用 CSS 自定义属性驱动（--btn-padding+ 单一类名） - 用
@use替代@import：Dart Sass ≥1.23.0 才支持；迁移可用sass-migrator module --verbose自动改写；第三方库未切@use前可混用，但加载顺序要明确：先@use自己模块，再@import第三方 - PostCSS 必须介入且位置正确：Sass 编译 → PostCSS（
postcss-discard-unused、cssnano）→ 最终压缩；cssnano的mergeLonghand、normalizeWhitespace才能真正简写0px → 0、#ff0000 → #f00、合并重复声明
最容易被忽略的是：Sass 输出阶段没关紧第一道闸门（outputStyle 和 sourceMap），后面所有压缩都是徒劳。体积问题不在“怎么引”，而在“引之前，有没有把源头的冗余砍干净”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
