@use 是构建标准化组件库的起点，必须配合 _index.scss 实现显式收口、分层变量（原子→语义→组件）和命名空间访问，否则无法保障隔离性、可覆盖性与可维护性。
@use 是构建标准化组件库的起点，不是可选项。不切换到 @use 体系，所谓“标准化”只是在全局作用域里手动约定命名，编译时无法隔离、tree-shaking 失效、IDE 跳转失灵——你写的每个 $color-primary 都可能被其他文件意外覆盖或重复定义。
为什么 @forward 必须配合 _index.scss 才能暴露接口
直接 @use "components/button" 看似可行，但用户无法统一导入整套组件；而裸写 @forward "button" 又会导致变量不可见。真正的标准化入口必须是显式收口的 _index.scss：
- 它只做两件事：
@use子模块 +@forward暴露公共成员，不能写任何样式规则 - 必须用
as *或as btn-*显式声明暴露方式，否则外部访问不到$size-md - 若多个子模块都含
$radius-sm，@forward "a"; @forward "b";会直接报错，必须用with ($radius-sm as $a-radius-sm)重命名
变量分层：原子值 → 语义名 → 组件引用，缺一不可
把 $primary-color: #007bff 直接塞进按钮样式里，等于锁死主题能力。标准化要求三层分离：
-
原子层（如
_colors.scss）：只存$colors: ("blue-500": #3b82f6, "gray-700": #374151);，不加!default -
语义层（如
_variables.scss）：用$color-primary: map-get($colors, "blue-500") !default;提取，允许用户覆盖 -
组件层（如
_button.scss）：只写background-color: $color-primary;，禁止直引$colors或硬编码色值
!default 不是覆盖开关，而是编译期“首发抢占”
写 $border-radius: 6px !default; 却没生效？大概率是顺序错了。它只在变量从未被赋值过时才起作用：
- 用户自定义变量文件（如
theme.scss）必须@use或@import在所有组件变量之前 - 组件库自己的
_variables.scss里不能出现无!default的赋值，比如$font-size-base: 14px;—— 这会彻底堵死覆盖路径 -
!default对 CSS 自定义属性（--primary-color）完全无效，别试图写$--primary-color: red !default
真正难的不是写对第一个 @use，而是让每个新增组件都严格遵循 _index.scss → @forward → 分层变量 → 命名空间访问 这条链路。松动一次，模块边界就从代码里消失，变成靠文档和人肉记忆维系的脆弱约定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
