真正起效的是重构 SCSS 组织方式，停用 @extend 改用 CSS 自定义属性、用 @use 按需导入、禁用循环生成改用 PurgeCSS 裁剪、显式设 sassOptions.outputStyle='compressed' 且 sourceMap=false。
单纯靠压缩或删空格不可能把体积砍半——真正起效的是重构 SCSS 的组织方式，让编译器只生成你实际用到的 CSS 规则。
停用 @extend，改用 CSS 自定义属性统一控制视觉变量
@extend 是体积膨胀的隐形推手：它不共享声明，而是机械复制整套规则。比如 %btn-base 被 12 个组件引用，就会生成 12 份一模一样的 padding: 0.5rem 1rem; border-radius: 4px;，cssnano 也合并不了。
- 把所有间距、颜色、圆角、阴影值抽成
:root变量，例如--space-sm: 0.5rem;、--color-primary: #007bff; - 组件内统一用
margin: var(--space-sm)，最终 CSS 只有一处变量定义 + 大量引用 - 旧浏览器兼容交给
postcss-custom-properties回退，别指望 Sass 编译期解决 - 验证方式：搜索输出 CSS 中
margin:出现次数，若远高于组件数，基本就是@extend泛滥了
用 @use 替代 @import，并手动按需导入 Bootstrap 等第三方库
@import 是文本拼接，哪怕你只调用一个 px2rem()，也会把整个 functions.scss（含几十个未用函数）全塞进编译流；@use 则只加载被显式引用的部分，且自动命名空间隔离。
- 删掉
@import "bootstrap/scss/bootstrap.scss"这类全量入口 - 新建自定义文件，只
@use或@import真正需要的模块，例如：@use "bootstrap/scss/functions"、@use "bootstrap/scss/utilities"、@use "bootstrap/scss/components/buttons" - 第三方库尚未支持
@use（如旧版 Bootstrap）时，保留@import，但必须放在自己模块之后，避免变量被覆盖 - 务必在
package.json中配置"sideEffects": ["*.scss"]，否则 Webpack 不敢对未引用的 SCSS 文件做 Tree Shaking
禁用工具类循环生成，改用 PurgeCSS 静态裁剪原子类
写 @for $i from 1 through 100 { .m-#{$i} { margin: #{$i}px; } } 直接产出 100 条规则，--style=compressed 只是把它们挤在一行，体积照旧。PurgeCSS 才能真正删掉没被 HTML/JS 引用的类。
立即学习“前端免费学习笔记（深入）”；
- 保留原子类写法（如
mt-2、flex），但关闭 Sass 层的循环生成 - 用
purgecss扫描./src/**/*.{html,js,jsx,ts,tsx,vue}，提取所有出现过的类名 - 动态拼接类名（如
className={`btn-${type}`}）要加whitelistPatterns: [/^btn-/]显式保活 - Webpack 用户配
glob路径，Vite 用户优先用vite-plugin-purgecss，别依赖默认 preset
sassOptions.outputStyle 必须显式设为 'compressed'，且 sourceMap: false
这不是“可选项”，是体积控制的第一道闸门。Sass 默认输出 nested 格式，后续所有压缩插件都得处理一堆缩进和换行——而这些本可在第一轮就干掉。
- Webpack 项目中，必须写在
module.rules.use[loaderIndex].options.sassOptions下，不是顶层配置 - Vue CLI 项目要嵌套在
css.loaderOptions.sass.sassOptions里 -
sourceMap: false是硬性要求：开启后 base64 映射内容直接追加在 CSS 末尾，轻松多出 100KB+ - 验证是否生效：临时改成
'expanded'，看输出 CSS 是否突然带缩进和空行
体积减半的关键不在“怎么压”，而在“不生成”。压缩只是收尾动作，真正卡住体积的，是嵌套层级、@extend 组合爆炸、全量引入和工具类失控——这些都发生在 Sass 编译前的架构设计阶段。
