升级webpack5后sass声明的全局变量失效提示未定义该如何解决？

报错核心原因 #

• 该问题本质是 sass-loader 版本随webpack5升级后，默认编译逻辑变更导致的，和Sass官方规则并不冲突：你对「顶层变量为全局变量」的规则适用场景理解有误，该规则的生效前提是变量和使用逻辑处于同一个Sass模块作用域下。
• webpack4配套的低版本sass-loader默认使用旧的「全局拼接编译」逻辑，所有@import导入的文件会被合并为同一个模块编译，因此父文件定义的顶层变量可以被子文件直接使用。
• webpack5配套的sass-loader@10+已切换为Dart Sass的标准模块编译模式，默认所有.scss文件都是独立模块，变量作用域完全隔离，父文件的变量不会自动透传到导入的子模块，因此会抛出变量未定义的错误。你之前的写法属于依赖旧版本工具兼容逻辑的非标准写法，并不符合当前Sass官方的模块规范。

解决方案 #

方案1：适配Sass模块规范（推荐） #

采用Sass官方推荐的@use+with语法传递变量，修改代码如下：
application.scss：

@use 'waffles' with (
  $color: golden-brown
);

waffles.scss：

// 先声明可外部配置的变量，添加!default标识
$color: #333 !default;
.yummy { color: $color }

方案2：临时回退旧编译逻辑（仅用于过渡） #

在webpack配置的sass-loader参数中开启旧版兼容模式，无需修改业务代码：

// webpack.config.js 对应规则配置
{
  loader: 'sass-loader',
  options: {
    sassOptions: {
      legacy: true // 开启旧版全局拼接编译模式
    }
  }
}

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