Sass使用@use覆盖模块!default变量时出现未声明错误问题咨询

常见报错原因 #

• 路径引用错误
  如果local.scss和global.scss处在同一目录下，你需要在@use时补全相对路径标识./，否则Sass可能会优先加载内置模块、node_modules里的同名模块，导致实际加载的不是你写的带!default变量的local.scss文件，触发报错。
• 单例加载冲突
  @use规则加载的模块是全局单例的，如果你在项目其他位置（比如样式入口文件、其他提前加载的scss文件），在global.scss加载之前就已经通过@use或者@import导入过local.scss，模块会被提前初始化，后续再用@use + with配置覆盖变量时，目标变量已经被赋值不再是!default状态，就会触发该报错。
• 基础语法错误
  你贴出的global.scss代码里，@use语句最后缺少结束分号，部分严格的Sass编译环境会因此解析异常，也可能连带触发变量识别错误。
• 版本不兼容
  @use是Dart Sass 1.23.0版本才新增的特性，如果你使用的是已经废弃的node-sass、或者版本低于1.23.0的Dart Sass，也会出现规则解析异常，触发报错。

修正方案 #

1. 首先确认项目使用的是1.23.0及以上版本的Dart Sass，替换掉已废弃的node-sass
2. 确保全局第一次加载local.scss的位置就是你写@use with的位置，删除所有提前导入local.scss的语句
3. 修正路径和语法问题，修正后的代码如下：

// local.scss 代码无需修改
$color-primary: #ffffff !default;
$color-secondary: #fffeee !default;

// global.scss 修正后代码
@use './local' with (
  $color-primary: #fefefe,
  $color-secondary: #f4f4f4
);

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