React中CSS Modules里Sass @use指令失效，@import可正常使用

核心原因 #

1. @use与@import的路径解析逻辑不同：CRA的Sass配置中，@use不支持@import常用的~路径前缀，添加~反而会导致路径解析失败；必须使用正确的相对路径或基于src的绝对路径。
2. 命名空间机制被忽略：@use默认会为引入的模块添加命名空间，直接使用变量名（如$primary-color）而不指定命名空间或取消命名空间，会触发"Undefined variable"错误——这是和@import全局注入变量的关键区别。
3. 版本兼容性问题：旧版CRA（4.x及以下）内置的sass-loader版本较低，对@use的支持不完善；同时Sass版本低于1.23.0也会不支持@use语法。

解决方法 #

1. 修正@use的导入语法与变量引用 #

假设你的目录结构如下：

src/
├── styles/
│   └── common.scss
└── components/
    └── custom/
        └── Custom.module.scss

在Custom.module.scss中使用以下两种正确方式之一：

• 带命名空间引用：

  @use '../../styles/common' as common; // 相对路径，无需~或扩展名
  
  .custom {
    color: common.$primary-color; // 通过命名空间访问变量
  }
  

• 取消命名空间直接引用：

  @use '../../styles/common' as *; // 用as *取消命名空间
  
  .custom {
    color: $primary-color; // 直接使用变量名
  }
  

2. 升级CRA到兼容版本 #

如果你的CRA版本低于5.x，执行命令升级：

npm install react-scripts@latest

升级后重启开发服务器，CRA 5.x内置的sass-loader v12+对@use的支持更完善。

3. 确保Sass版本符合要求 #

@use是Sass 1.23.0+引入的特性，检查当前版本：

npm list sass

若版本过低，升级sass：

npm install sass@latest

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