@use比@import快，因其确保同一模块只解析编译一次并复用符号表；而@import每次调用都重复展开、解析和mixin展开，导致50次导入即50次相同解析。
为什么@use比@import快：模块只解析一次
@use 的核心提速机制不是语法更“高级”，而是它让 Sass 编译器能做缓存判断：同一个模块路径（如 "utils/breakpoints"）在整个项目中无论被 @use 多少次，都只解析、编译一次，并复用符号表。而 @import 每次出现，都会把目标文件内容完整展开、重新走一遍变量解析和 mixin 展开流程。
常见错误是把所有基础变量塞进一个 _variables.scss，然后在 50 个组件里都写 @import "variables"——这等于让编译器重复执行 50 次相同的解析逻辑。
- 使用
@use "tokens" as t后，t.$spacing-sm的访问不触发重编译，只查缓存 -
@import导入的文件若含@import嵌套，会形成递归展开树，深度越大，重复解析越严重 - Dart Sass 1.32+ 对
@use模块做了 AST 级别缓存，但对@import仅做文件内容缓存（无法跳过语义分析）
哪些场景下@use提速最明显
提速效果不是均匀分布的，主要集中在三类高开销操作被规避时：
- 大量组件文件共用同一套工具函数（比如
@use "sass:math"）——@import会让 math 函数每次都被重新绑定到全局作用域 - 主题切换依赖多套变量文件（
@use "themes/dark" as darkvs@use "themes/light" as light）——@use可按需加载，@import则强制全量合并 - 使用
@forward构建设计系统入口（如@forward "tokens" with ($spacing-sm: 4px)）——@use允许在转发层就完成变量注入，避免下游重复覆盖逻辑
为什么用了@use还是慢？检查这几个点
不是用了 @use 就自动变快；配置或组织不当，反而可能引入新瓶颈：
立即学习“前端免费学习笔记（深入）”；
-
@use "/variables" as *会破坏模块隔离，导致命名冲突后编译器退化为类似@import的全局查找模式 - 误将私有文件（如
_mixins.scss）直接@use，Dart Sass 会报错或静默失败，部分 loader（如旧版sass-loader）甚至 fallback 到@import行为 - webpack 中
sass-loader版本 @use 路径解析不支持别名（@/scss），会降级为文件系统遍历，I/O 开销陡增 - 在
vue.config.js的css.loaderOptions.sass.additionalData里写@use——这会让每个.vue文件都独立执行一次模块解析，完全抵消@use的缓存收益
真正影响编译速度的其实是模块粒度
模块拆得太碎或太粗，都会削弱 @use 的缓存优势。比如把断点、颜色、间距全塞进一个 tokens.scss，哪怕只改了 $font-size-base，整个 tokens 模块缓存也会失效；反过来，为每个变量单独建文件（_spacing-sm.scss、_spacing-md.scss）又会导致模块注册开销上升。
推荐按语义边界切分：
-
@use "sass:math"（官方模块，零成本） -
@use "utils/breakpoints" as bp（纯逻辑，无样式规则） -
@use "tokens/color" as c（仅含 $color-* 变量） - 禁止
@use "components/button"这类含实际样式的模块——它不该被复用，应由组件自身控制编译上下文
模块是否含 CSS 规则，是判断它该不该被 @use 的关键分水岭。一旦混入选择器，缓存就不再稳定。
