@use 不能直接替代 @import 因为它默认启用严格命名空间隔离，所有成员必须显式通过命名空间调用，如 colors.$primary；而 @import 是全局合并，易冲突难溯源。
为什么 @use 不能直接替代 @import 的写法
因为 @use 默认启用**严格命名空间隔离**：它不会把被引入文件里的变量、函数、混入（@mixin）自动注入当前作用域。而 @import 是全局合并的，所有东西“一锅端”进来，容易冲突也难溯源。
常见错误现象：@use "utils"; 之后直接写 color-primary 报错 —— 因为它实际叫 utils.$color-primary，没加命名空间就找不到。
- 必须通过
namespace.$var、namespace.fn()、namespace.mixin-name()显式调用 - 命名空间默认是文件名（不含扩展名），如
@use "src/functions"→ 命名空间为functions - 可用
as重命名：@use "src/functions" as f;→ 后续用f.get-px() - 想退化成
@import风格？可以用as *，但不推荐 —— 失去命名空间保护，等于白升级
@use 后怎么访问变量、函数和混入
所有成员都必须带前缀，没有例外。Sass 不会为你“猜”来源。
假设你有 _colors.scss：
$primary: #007bff;
@function tint($color, $percent) {
@return mix(white, $color, $percent);
}
@mixin card-shadow {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
在主文件中：
-
@use "colors";→ 调用：color: colors.$primary;、background: colors.tint(colors.$primary, 20);、@include colors.card-shadow; -
@use "colors" as c;→ 调用：c.$primary、c.tint(...)、@include c.card-shadow; - 混入名、函数名、变量名若含连字符（
-），调用时仍用连字符，不是驼峰 —— Sass 不做转换
多个 @use 引入同名变量/函数会冲突吗
不会。这是 @use 最关键的优势：不同模块的同名成员互不干扰，除非你显式用 as * 或手动重命名覆盖。
例如：
-
@use "theme/dark" as dark;和@use "theme/light" as light;可共存 -
dark.$bg和light.$bg是两个独立变量，无冲突 - 但如果写
@use "theme/dark" as theme;和@use "theme/light" as theme;，第二条会报错："theme" is already used as a namespace - 注意：
@use是**单例机制**——同一路径在同一个编译上下文中只执行一次，多次@use不重复解析，也不重复执行顶层代码（比如@debug）
从 @import 迁移到 @use 的硬性限制
不是所有 @import 场景都能无损迁移。最常踩的坑是：第三方库或旧项目依赖全局注入，比如 Bootstrap 4 的 Sass 文件就是为 @import 设计的。
- Bootstrap 5+ 才原生支持
@use；4.x 直接@use会报错 —— 它的_variables.scss里有!default覆盖逻辑，依赖@import的顺序合并语义 -
@use**不能跨文件修改已声明变量**（比如先@use再$var: new-value !global），因为模块作用域封闭；而@import下可以靠顺序覆盖 - 如果必须兼容老库，可暂时保留
@import，但不要和@use混用在同一文件 —— Sass 明确禁止这种混合导入方式，会报"@import rules cannot be used alongside @use rules" - 真正要落地
@use，得整套重构：把全局变量拆进各自模块，用with参数配置代替顺序覆盖
命名空间看着啰嗦，但它让样式依赖变得可追溯、可测试、可替换。省掉前缀的代价，是后期花三倍时间查 undefined variable 错误在哪一层漏了引入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
