@use能避免变量和mixin冲突，因为它默认创建命名空间，所有成员必须显式加前缀访问（如colors.$primary），而@import会将成员注入全局导致覆盖；@use路径须精确匹配下划线开头的partial文件，不补扩展名、不搜子目录，纯css需包装后引入，混用@import会触发整链降级。
@use 为什么能避免变量和 mixin 冲突
因为 @use 默认创建命名空间，所有成员（$variable、@mixin、@function）必须显式加前缀访问。比如 @use "colors" 后，$primary 不再存在，只能写 colors.$primary；而 @import "colors" 会把 $primary 直接注入全局，一旦另一个 @import "theme" 也定义了 $primary，后者无警告覆盖前者。
常见错误现象：
- 多个
@import文件定义同名@mixin clearfix，Sass 只保留最后一个，调用行为不可预测 - 组件 A 和 B 都
@import "_utils"，最终 CSS 中.sr-only类被输出两次 - 改了
_mixins.scss里的fluid-type()，但部分组件样式没更新——旧版@import缓存或加载顺序混乱导致
@use 路径和文件名有硬性要求
@use 不是字符串替换，它只识别带下划线前缀的 partial 文件（如 _vars.scss），且路径必须精确匹配文件系统，不自动补扩展名、不猜文件名、不搜子目录。
实操建议：
-
@use "src/vars"✅ —— 对应src/_vars.scss -
@use "src/vars.scss"❌ —— 报错No module with the name "src/vars.scss" -
@use "_vars"❌ —— 必须省略下划线，仅用逻辑名 - 纯 CSS 文件（如
normalize.css）不能直接@use，得新建_normalize-wrapper.scss，里面只写一行：@import "node_modules/normalize.css/normalize.css"; - 路径含空格或中文？Dart Sass 直接拒绝解析，不报具体行号，只提示“Invalid syntax”
@use 和 @import 混用会导致整文件降级
只要一个 .scss 文件里出现任意一行 @import（哪怕只是注释掉的残留），Dart Sass 就把整个文件及其所有依赖链降级为 legacy 模式：所有 @use 失效，命名空间消失，变量回归裸名访问，@forward 行为异常。
典型症状：
-
@use "tokens" as t后写t.$spacing-sm报错，但删掉同一文件底部注释里的// @import "reset"就立刻正常 - 迁移时发现部分文件“突然”支持裸变量名，其实是某处
@import触发了隐式降级 -
@forward在降级模式下退化为类似@import的传递行为，破坏封装意图
@use 的缓存机制真能提速，但有前提
@use 的编译加速不是玄学——它让 Dart Sass 对同一路径模块只解析一次 AST 并复用符号表。而 @import 每次都做完整文本拼接+重解析，50 个组件都 @import "_utils"，就等于执行 50 次相同解析。
但提速前提是模块组织合理：
- 模块粒度太粗（如把所有 token 塞进一个
_tokens.scss），改一个$font-size-base就让整个模块缓存失效 - 模块粒度太细（如每个间距值单独建文件），模块注册开销上升，I/O 反而变重
- 在 webpack 的
additionalData里写@use，会让每个.vue单文件组件独立触发一次模块解析，完全抵消收益 -
@use "sass:math"这类内置模块，@use真正复用已编译函数绑定；@import则每次重新挂载到全局
最易被忽略的一点：命名空间不是可选项，而是访问必经路径。没前缀，就不是那个变量——这不是限制，是强制你写出可追溯的依赖关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
