因为@use默认创建严格命名空间隔离,变量必须通过“模块名.变量名”显式访问(如variables.$primary-color),而非全局注入;且仅识别下划线前缀的partial文件(如\_variables.scss),路径须精确匹配,@use还必须置于文件顶部。

为什么@use加载后变量不能直接用?
因为@use不是“把内容抄进来”,而是“建立一个带名字的抽屉”——变量、函数、混入全锁在那个命名空间里,不加前缀就等于没打开抽屉。这是设计使然,不是 bug。
常见错误现象:@use "variables"之后写color: $primary-color,编译报Undefined variable "$primary-color"。Sass 根本不找全局作用域里的这个变量,它只认variables.$primary-color。
-
@use默认创建严格隔离的作用域,所有成员必须显式通过namespace.$var、namespace.fn()、namespace.mixin-name()调用 - 命名空间默认是文件名(不含
_和.scss),比如@use "src/tokens"→ 前缀是tokens - 可用
as自定义前缀:@use "src/tokens" as t→ 后续用t.$spacing-md - 想退化成
@import风格?可以用@use "variables" as *,但多模块时极易冲突,不推荐
@use路径和文件名为什么必须带下划线?
@use只识别以_开头的 Sass partial 文件(如_variables.scss)。你写@use "variables",Sass 实际去找的是_variables.scss,而不是variables.scss。
常见错误现象:文件叫variables.scss,@use "variables"会报No module with the name "variables";或者路径写错,比如当前文件在components/button.scss,却写@use "variables",而实际文件在styles/_variables.scss,那就得写@use "../../styles/variables"。
- 文件必须是
_xxx.scss格式,否则@use拒绝加载(不是警告,是直接失败) - 路径是相对当前文件的,不是项目根目录;CLI 可用
--load-path扩展查找范围 -
@use不自动补扩展名,也不猜文件名——@use "variables"≡@use "_variables.scss",仅此一种匹配方式 - CSS 文件(如
normalize.css)不能直引,得包一层_reset.scss,里面用@import加载 CSS 再@use这个 wrapper
为什么不能在嵌套规则里写@use?
@use必须出现在文件最顶部,且只能在顶层作用域使用。把它塞进@media、&:hover或.card { ... }里,Sass 会直接报语法错误。
常见错误现象:复制旧@import习惯,在组件样式块内部写@use "mixins",结果编译中断,提示Invalid CSS after "@use": expected selector or at-rule。
-
@use是模块加载指令,属于编译期行为,不是运行时逻辑,必须提前声明 - 它影响整个文件的作用域结构,不能局部生效
- 如果多个文件都需要同一模块,各自在顶部
@use一次即可,Sass 会自动去重缓存,不会重复解析
编译速度变快,真跟@use有关系?
有,而且很实在。同一个@use "utils"在 20 个文件里出现,Sass 只解析一次并复用 AST;而@import "utils"每出现一次,就完整展开、重走一遍变量绑定和 mixin 展开流程。
但提速的前提是模块组织合理:把颜色、间距、断点拆成独立小模块(_colors.scss、_spacing.scss),比塞进一个_tokens.scss更利于缓存命中。改$spacing-sm时,只有_spacing.scss缓存失效,其他不受影响。
- 模块粒度太粗(全塞一起)→ 小改动触发大范围重编译
- 模块粒度太细(每个变量一个文件)→ 模块注册开销上升,I/O 变多
-
@use "/vars" as *会破坏隔离,让编译器退化为类似@import的全局查找模式,反而拖慢 - 在 webpack 的
additionalData里写@use,等于每个 CSS 文件都独立加载一次模块,完全抵消缓存收益
theme.$border-radius,你就知道这值来自主题层,而不是某个组件随手覆盖的$border-radius。一旦项目多人维护,这种显式性比省几下键盘重要得多。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











