在Create React App中正确访问Sass/Node-Sass嵌套别名的方法

问题原因 #

@use 引入的命名空间属于文件局部作用域，_Tokens.scss 里定义的 colors 命名空间仅能在该文件内部使用，不会被引入 _Tokens.scss 的 _Base.scss 继承或嵌套访问。你尝试的 tokens.colors.$primary-color 写法不符合SCSS规则，因此触发编译报错。

解决方案 #

以下两种常用修正方式，可根据需求选择：

方式1：用 @forward 转发变量（推荐） #

修改 _Tokens.scss，使用 @forward 代替 @use，将 _Colors.scss 的变量暴露给后续引入 _Tokens.scss 的文件：

// _Tokens.scss
// 转发Colors文件的变量，可添加前缀避免命名冲突（可选）
@forward "./Colors" as colors-*;

此时 _Base.scss 中可这样访问变量：

// _Base.scss
@use "Styles/Tokens/Tokens" as tokens;

body {
  color: tokens.colors-primary-color;
}

若不需要前缀，直接转发即可：

// _Tokens.scss
@forward "./Colors";

对应 _Base.scss 写法：

// _Base.scss
@use "Styles/Tokens/Tokens" as tokens;

body {
  color: tokens.$primary-color;
}

方式2：在 _Tokens.scss 中显式导出变量 #

如果需要在 _Tokens.scss 中对变量做二次处理，可先 @use 引入，再导出变量：

// _Tokens.scss
@use "./Colors" as colors;

// 显式导出Colors中的变量
$primary-color: colors.$primary-color;

随后在 _Base.scss 中直接通过 tokens 命名空间访问：

// _Base.scss
@use "Styles/Tokens/Tokens" as tokens;

body {
  color: tokens.$primary-color;
}

内容的提问来源于stack exchange，提问作者Vince