React中嵌套.scss文件使用SCSS @use失效原因咨询

核心错误点 #

1. 变量赋值语法错误：SCSS中变量赋值使用冒号:而非等号=，你的$theme-color = $white;写法不符合语法规范。
2. @use的模块化隔离机制：SCSS的@use是模块化导入，每个文件的变量默认私有，不会自动向上/向下传递。你在index.scss里用@use './color' as *;导入的$white，只会在index.scss内部可用，外部通过@use './css'导入index.scss时，无法直接访问这个变量。
3. 导入路径与依赖关系错误：variables.scss想要使用$white，但没有直接导入定义它的color.scss，而是间接导入css目录，这不符合SCSS模块化的依赖规则。

修正方案 #

方案一：直接导入color.scss到variables.scss

修改src/assets/variables.scss：

// 直接导入定义$white的文件
@use './css/color' as *;
// 修正赋值语法
$theme-color: $white;

方案二：在index.scss中导出$white变量

如果希望通过index.scss中转，需要显式导出变量：

1. 修改src/assets/css/index.scss：

// 显式将color.scss的$white变量导出给外部模块
@forward './color' show $white;

2. 然后修改src/assets/variables.scss：

@use './css' as css;
// 通过命名空间访问导出的变量
$theme-color: css.$white;

补充说明 #

SCSS的@use和@forward是为了替代旧的@import实现真正的模块化：@use导入的变量默认仅能通过命名空间访问（除非用as *），@forward则可以将一个模块的变量、混合宏等导出给其他模块使用，避免重复导入。

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