Sass 本身不提供代码分片能力，其 @use/@import 仅在编译期合并样式，真正分片依赖构建工具的 CSS 提取与分割；按需引入须从入口文件精准控制导入路径，并配合 PurgeCSS 等工具实现最终树摇。
直接结论：Sass 本身不提供“代码分片”能力，所谓“Sass 代码分片”本质是手动控制 @use / @import 链路 + 构建时拆包，不是运行时动态加载；误以为写几个 @use 就能自动分片，反而会导致 CSS 体积失控。
为什么不能依赖 Sass 做真正的“代码分片”
Sass 是编译期预处理器，所有 @use、@import 都在构建时内联合并为单个 CSS 文件。它没有模块加载器、不识别运行时条件、也不生成 chunk 或 import map。所谓“分片”，实际是你人工决定哪些 SCSS 文件被哪个入口引用，再配合构建工具（如 Webpack、Vite）做 CSS 提取和分割。
- 常见错误：在多个页面入口里都
@use "sass/components/button"，结果每个 CSS 包里都重复生成 button 样式 - 真正起作用的是构建工具的
splitChunks（Webpack）或cssCodeSplit（Vite），不是 Sass 语法 -
@use只解决命名空间和变量隔离，不解决产物体积——它甚至可能因重复@use加重冗余
按需引入必须从入口文件开始切
关键不是“用了多少组件”，而是“谁在导入它们”。全量 @import "bulma" 或 @use "cirrus-core" 会把整个框架拉进来，哪怕你只用了一个 .button 类。
- 创建独立入口文件，例如
admin.scss和landing.scss，各自只@use所需模块 - Bulma 示例：
@use "sass/elements/button"比@use "sass/components"更精准；后者仍含 dropdown、modal 等无关样式 - Cirrus 示例：避免
@use "src/cirrus-ext"，改用@use "src/components/button"+@use "src/utils/flex" - Bootstrap-sass 场景下，必须注释掉未使用的
@import "bootstrap/tooltip"等行，否则它们照常编译
变量覆盖比删除导入更危险
很多人以为改 $enable-modals: false 就能删掉 modal 样式，但 Bootstrap-sass 的 $enable-* 变量只控制部分逻辑分支，不阻止相关 mixin 被调用——只要某处写了 @include modal-styles()，样式就还在。
立即学习“前端免费学习笔记（深入）”；
- 真正安全的剔除方式：不导入对应文件（如跳过
@import "bootstrap/modal"） - 变量覆盖更适合主题定制（
$primary、$font-family-base），而非功能开关 - 检查最终 CSS 是否含
.modal、.tooltip选择器，别只信变量名
压缩后体积才是唯一真实指标
开发时看到 custom-bulma.scss 只有 20 行，不代表输出 CSS 小。Sass 编译会膨胀，尤其用了 @extend 或深度嵌套时。
- 用
npx sass --style=compressed src/admin.scss > dist/admin.css生成上线包 - 运行
gzip -c dist/admin.css | wc -c查看传输体积，这才是浏览器真实加载量 - 打开 Chrome DevTools → Network → 找到该 CSS → 对比 “Transfer Size” 和 “Resource Size”，若后者远大于前者，说明压缩率低或存在大量重复规则
- 警惕
@extend %utility：跨多个文件使用时，Sass 会生成.card .text-center, .modal .text-center这类组合选择器，比单独写三行.text-center { }更大
最容易被忽略的一点：Sass 层面的“按需”只是第一层过滤，它完全无法替代 PurgeCSS 或 Lightning CSS 的树摇（tree-shaking）。即使你一个组件都没 @use，只要 HTML 中写了 class="btn btn-primary"，PurgeCSS 就得保留对应规则——Sass 不知道你的 HTML 长什么样。
