Angular 14升级至15后出现SassError: Undefined mixin问题求助

核心原因 #

Angular Material 15全面切换到MDC（Material Design Components）架构，旧的mat-form-field-theme混合宏已被废弃或替换为MDC版本实现，且样式导入方式从@import改为Sass模块的@use，未完成迁移的代码会触发未定义错误。

修复步骤 #

1. 替换旧混合宏与导入方式 #

打开src/configurator-styles/configurator-material.scss文件，定位到报错的第69行：

@include mat-form-field-theme($formfield-primary-theme);

替换为MDC兼容的代码，同时确保导入正确的模块：

// 导入MDC表单字段主题模块
@use '@angular/material/form-field' as mat-form-field;

// 使用MDC版本的主题混合宏
@include mat-form-field.theme($formfield-primary-theme);

2. 适配MDC规范定义主题 #

如果你的主题是用旧方式（如mat-light-theme）定义的，需切换为新的mat.define-theme()方法：

// 替换旧的@angular/material/theming导入
@use '@angular/material' as mat;

// 定义符合MDC规范的主题
$formfield-primary-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
      warn: mat.define-palette(mat.$red-palette),
    ),
    typography: mat.define-typography-config(),
    density: 0,
  )
);

3. 清理缓存并重新构建 #

执行以下命令彻底清理缓存后重装依赖：

ng cache clean
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
ng serve

4. 验证迁移完整性 #

重新运行官方迁移命令，检查是否有遗漏的迁移项：

ng generate @angular/material:mdc-migration

注意查看命令输出的警告或未处理文件，确保所有旧组件和样式完成MDC迁移。

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