sass本身不实现css按需加载，仅做编译时拼接；真正按需需手动控制@use路径、构建工具分包及purgecss树摇三者协同。
Sass 本身不实现 CSS 按需加载，它只做编译时拼接；所谓“按需”，全靠你手动控制 @use 路径 + 构建工具分包 + PurgeCSS 树摇，三者缺一不可。
为什么 @use 不等于 CSS 按需输出
很多人以为写 @use "components/button" 就能让按钮样式只在用到 .btn 时才进最终 CSS —— 实际不是。只要 _button.scss 里有顶层规则（比如 .btn { display: inline-flex; }），它就会无条件编译进输出文件，哪怕你只调用了 button.$size-sm 这个变量。
关键区别：@use 控制的是 Sass 符号（变量/函数/mixin）的可见性，不是 CSS 规则的生成开关。
- 顶层样式规则（无
@mixin/%placeholder包裹）会 100% 输出 -
@mixin定义的规则，只有被@include才会生成 CSS -
%placeholder必须配合@extend显式调用，否则不输出
真正减小 CSS 体积的实操路径
想让最终 CSS 只含用到的类，必须从三处同时下手：
- 入口 SCSS 文件里，只
@use确实需要的模块路径，例如用@use "bootstrap/scss/buttons"，而不是@use "bootstrap/scss/bootstrap" - 构建工具开启 CSS 代码分割：Vite 开
cssCodeSplit: true，Webpack 配splitChunks.chunks: "all"并启用mini-css-extract-plugin - 上线前跑 PurgeCSS（或 Tailwind 的
content配置），删掉 HTML 中未出现的选择器，比如.modal、.tooltip
漏掉任何一环，都可能让未用样式留在生产包里。
Bootstrap 5 按需导入的硬性约束
直接 @import "bootstrap/scss/bootstrap" 是体积炸弹，因为它会拉入全部断点、全部工具类变体、全部组件。安全做法是拆解导入，并严格守序：
- 必须前置导入三件套：
@use "bootstrap/scss/functions"→@use "bootstrap/scss/variables"→@use "bootstrap/scss/mixins" - 禁用未用组件要在
@use "variables"之前加变量覆盖，如$enable-modal: false !default; - 工具类别贪全，改用细粒度路径：
@use "bootstrap/scss/utilities/text"、@use "bootstrap/scss/utilities/spacers" - 断点精简：在
@use "variables"前重定义$grid-breakpoints，删掉不用的sm、xl
顺序错、漏变量、或只删 @use 行却不关 $enable- 开关，都会导致编译失败或冗余残留。
按需加载最易被忽略的陷阱
很多团队卡在“明明只 @use 了 button，为啥 CSS 里还有 dropdown 样式？”——根本原因常不在 Sass 语法，而在构建链路：
- 多个页面入口各自
@use "button"，构建工具没做 CSS 公共提取，结果每个 chunk 都重复一份按钮 CSS - PurgeCSS 的
content没配全路径（漏了src/**/*.{vue,html,ts}），导致未渲染的组件类没被识别为“未使用” - 第三方 UI 库（如 Element Plus）的
dist/variables.scss是构建产物，值已固化；想覆盖必须自己维护一份源码级变量文件并确保@use顺序早于组件导入
真正的按需，不是写对一行 @use 就完事，而是整条构建流水线的协同控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
