--style=compressed不能真正减小CSS体积，仅删除空格、换行和注释，不合并重复规则、不剔除未用选择器；真正压缩需Sass输出expanded格式后交由PostCSS+cssnano处理。
压缩不是万能的，先看 Sass 源码有没有“爆仓”
直接加 --style=compressed 不会真正减小体积——它只删空格、换行、注释，不合并重复规则，也不剔除未用选择器。实测 gzip 后体积下降通常不到 3%。真正的问题藏在源码里：
• @extend %button-base 被多处调用，生成 .header .btn、.modal .btn 这类爆炸式选择器
• 嵌套超过 4 层，比如 .card { .list { .item { &:hover { ... } } } }，每层都复制前缀
• @import 全量引入大文件（如整个 Bootstrap），哪怕只用了一个函数
• 循环生成工具类：@for $i from 1 through 100 { .m-#{$i} { margin: #{$i}px; } }
PostCSS + cssnano 才是真正起效的压缩链
Sass 自身不调用 PostCSS 插件，--load-path 或 --require 对 cssnano 完全无效。必须分两步：
• 第一步：Sass 输出 --style=expanded（可读格式），确保 PostCSS 能正确解析嵌套和自定义属性
• 第二步：交给 postcss-cli 处理，例如：postcss dist/main.css -o dist/main.min.css --use autoprefixer cssnano
关键插件顺序不能错：autoprefixer 必须放在所有语法转换插件（如 postcss-preset-env）之后，否则它处理不到原始 display: grid，IE11 就白屏cssnano 的 mergeLonghand 和 normalizeWhitespace 才能真正把 0px → 0、#ff0000 → #f00、合并重复声明
CSS Modules 的 locals 注入容易悄悄增大体积
开启 CSS Modules 后，css-loader 默认把所有非 :global() 选择器都重命名，哪怕你只写了 .header，也会变成 .header_abc123。问题在于：
• 如果混用第三方库样式（如 .el-button）又没用 :global(.el-button) 包裹，构建时会生成大量无用局部映射
• 同时启用 exportLocalsConvention: 'camelCase' 可能触发额外字符串拼接逻辑，让 JS Bundle 多出几十 KB 的运行时代码
• SSR 场景下，建议用 onlyLocals: true 配合 css-loader?modules&onlyLocals，避免客户端打包注入冗余 locals 对象
提取 CSS 时 chunkFilename 缺 contenthash 就等于重复加载
mini-css-extract-plugin 提取 CSS 时，若设成 chunkFilename: '[name].css'，异步 chunk 和入口 chunk 名字冲突，插件无法区分，会为每个 chunk 单独输出一份内容相同的 CSS 文件——浏览器真会发多次请求。
必须改成：chunkFilename: '[name].[contenthash:8].css'
还要注意：
• 避免在 splitChunks.cacheGroups 中对 CSS 单独配置 name，否则会覆盖 chunkFilename 的 hash 行为
• 若用了 runtimeChunk: 'single'，得确保 CSS 提取不和 runtime 混进同一个 chunk，否则热更新时 CSS 也会被强制刷新
立即学习“前端免费学习笔记（深入）”；
