Sass中@use失效但@import正常？变量引用问题咨询

问题原因 #

@use 和 @import 的核心差异在于作用域机制：

• @import 会将引入文件的内容全局注入当前文件，因此变量可以直接调用。
• @use 会为引入的文件创建独立命名空间（默认是去掉下划线和后缀的文件名），变量必须通过命名空间访问，直接写 $color 会被识别为未定义。

解决方法 #

1. 使用默认命名空间访问变量 #

修改 _typography.scss 代码：

@use '_variables'; // 可省略.scss后缀

body {
  color: _variables.$color;
}

2. 自定义短命名空间 #

如果默认命名空间过长，可自定义简化：

@use '_variables' as v;

body {
  color: v.$color;
}

3. 全局暴露变量（不推荐） #

通过 !global 标记变量或 @use ... with 传递值，会破坏模块化设计，仅适合特殊场景：

// _variables.scss 中标记全局变量
$color: red !global;

// 或引入时局部覆盖
@use '_variables' with (
  $color: blue
);

body {
  color: $color;
}

最佳实践 #

• 坚持模块化原则：用 @use 时始终通过命名空间访问变量，避免全局污染。
• 统一命名空间规范：项目中可约定短命名（如 v 代指variables），提升代码可读性。
• 用 @forward 整合公共模块：在入口文件（如 _index.scss）统一导出变量，其他文件仅需引入入口：

// _index.scss
@forward '_variables';
@forward '_typography';

// 其他文件引入入口
@use '_index' as core;

body {
  color: core.$color;
}

内容的提问来源于stack exchange，提问作者Maicon Rodrigues dos Santos