Angular 14升级至15后出现SassError: Undefined Variable错误求助

核心原因 #

该错误大多源于Angular Material 15切换到MDC组件体系后，旧的Sass变量引用未完成迁移，或是@material/elevation依赖的版本、导入方式存在问题。

分步解决方案 #

1. 适配MDC体系的Sass变量引用 #

Angular Material 15废弃了大量旧的$mat-*前缀变量，需替换为MDC规范的变量或混入：

• 在全局样式文件（如styles.scss）中，确保导入MDC相关模块：

  // 替换旧的导入
  // @import '~@angular/material/theming';
  @import '@angular/material/theming';
  @import '@material/elevation/mixins';
  

• 检查所有组件样式文件，将旧变量（如$mat-elevation-z4）替换为MDC提供的方式，例如：

  // 替换前
  .card { box-shadow: $mat-elevation-z4; }
  // 替换后
  .card { @include mdc-elevation(z4); }
  

2. 校验@material/elevation版本一致性 #

执行npm ls @material/elevation后，确认该包版本与@angular/material版本完全匹配（需同为15.x.x系列）：

• 若版本不匹配，手动指定版本安装：

  npm install @material/elevation@15.2.9 --save
  

  其中15.2.9需替换为你package.json中@angular/material的实际版本号。

3. 调整全局样式加载顺序 #

在angular.json中，确保Material预构建主题的加载顺序早于自定义样式：

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

4. 彻底清理缓存并重建 #

完成上述调整后，执行以下操作确保依赖和构建缓存完全刷新：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install
ng build --delete-output-path
ng serve

5. 适配自定义主题配置 #

若使用了自定义Material主题，需更新为MDC兼容的配置格式：

@use '@angular/material' as mat;

$primary-palette: mat.define-palette(mat.$indigo-palette);
$accent-palette: mat.define-palette(mat.$pink-palette);
$warn-palette: mat.define-palette(mat.$red-palette);

$custom-theme: mat.define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $accent-palette,
    warn: $warn-palette
  ),
  elevation: mat.define-elevation-config()
));

@include mat.core();
@include mat.all-component-themes($custom-theme);

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