@use 不实现 css 按需加载，只控制 sass 符号可见性；真正按需输出 css 需将样式封装进 @mixin 并显式 @include，顶层规则会无条件编译。
@use 本身不实现“按需加载 CSS 规则”，它只按需加载 Sass 成员（变量/函数/mixin）；真正按需输出 CSS，得靠模块拆分 + 只在用到的地方 @include。
为什么 @use 不等于 CSS 按需加载
很多人误以为 @use 能让某个 _buttons.scss 里的 CSS 规则只在真正用到按钮组件时才编译进最终 CSS —— 实际不是这样。@use 只控制 Sass 层的符号可见性，不控制 CSS 输出时机。只要模块里有顶层样式规则（比如 .btn { ... }），它就会被编译进去，哪怕你只调用了 buttons.$primary。
常见错误现象：@use 'buttons' 后没写任何 @include buttons.btn-primary，但最终 CSS 里还是出现了所有按钮类 —— 因为 _buttons.scss 顶层写了未包裹的 CSS 规则。
- 只有
@mixin、@function、$variable是“惰性”的：不调用就不参与编译逻辑 - 顶层 CSS 规则（选择器块、
@layer、@import url(...)）是“立即执行”的：一@use就进编译流 - 想让 CSS 真正按需，必须把样式规则全包进
@mixin或@layer，再显式@include
如何用 @use + @mixin 实现真正按需 CSS
核心做法：把所有可复用的 CSS 规则封装成 @mixin，不在模块顶层写裸选择器。调用方按需 @include，Sass 才会把对应 CSS 插入最终输出。
例如 _typography.scss：
$font-size-base: 1rem;
@mixin text-lg {
font-size: $font-size-base * 1.25;
}
@mixin text-center {
text-align: center;
}
// ❌ 不要在这里写 .text-lg { ... } —— 它会无条件输出
在组件文件中：
@use 'typography' as t;
<p>.card-title {
@include t.text-lg;
}</p><p>.card-footer {
@include t.text-center;
}
</p>
- 每个
@include只生成一次对应 CSS，不会重复 - 没被
@include的@mixin完全不产出 CSS - 如果多个组件都用
t.text-lg，Sass 会自动 dedupe，最终只保留一份定义
如何避免 @use 引入冗余 CSS（特别是第三方库）
像 Bootstrap、Normalize 这类第三方库，源码里大量顶层 CSS 规则。@use 它们时，必须只导入逻辑部分，避开样式部分。
- ✅ 正确：
@use 'bootstrap/scss/functions' as bs-fn→ 只加载函数，无 CSS - ✅ 正确：
@use 'bootstrap/scss/mixins' as bs-mix→ 只加载 mixin，CSS 待调用 - ❌ 危险：
@use 'bootstrap/scss/bootstrap'→ 整个框架 CSS 全进来 - ❌ 危险：
@import 'normalize.css'（即使放在@use包装层里）→ 仍会原样输出@import url(...)，且无法 tree-shake
如果非要用 Normalize，应走构建工具链处理（如 PostCSS autoprefixer + CSS minify），而不是靠 Sass 模块系统“假装按需”。
路径与命名空间设计影响实际按需效果
模块组织方式直接影响你能否精准控制哪些 CSS 进入最终文件。一个松散的结构会让“按需”失效。
- 别把变量、mixin、CSS 规则混在一个文件里 ——
@use是原子操作，没法只取其中一部分 - 推荐拆分为：
_vars.scss（纯变量）、_mixins.scss（纯@mixin）、_rules.scss（仅当明确需要全局规则时才存在） - 路径别用
../：@use 'components/buttons'比@use '../components/buttons'更稳定，也方便 Webpack/Vite 的alias统一管理 - 别名统一用
as btn而不是as b或as buttons—— 太短易冲突，太长增加书写负担，折中即可
真正容易被忽略的是：Sass 的“按需”只发生在编译期，且完全依赖你手动封装和调用。没有自动分析、没有 AST 树摇，也没有运行时 lazy load。一旦你忘了把某段 CSS 包进 @mixin，它就永远静态在那儿了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
