升级Angular Material 15后自定义主题编译报错：未定义Mixin

问题概述 #

将Angular及Angular Material升级至15版本后，原14版本可正常运行的自定义主题出现构建错误，报错为SassError: Undefined mixin，具体指向@include theme.validate-theme-styles($light-theme, $theme);中的validate-theme-styles未定义。

报错信息 #

./src/lawyer.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
54 │   @include theme.validate-theme-styles($light-theme, $theme);
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  @material\linear-progress\_linear-progress-theme.scss 54:3                 theme-styles()
  node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 14:3  -palette-styles()
  node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 35:7  @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5    @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3    disable-mdc-fallback-declarations()
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3    using-mdc-theme()
  node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 33:3  color()
  node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 60:7  @content
  node_modules\@angular\material\core\theming\_theming.scss 402:3            private-check-duplicate-theme-styles()
  node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 54:3  theme()
  node_modules\@angular\material\core\theming\_all-theme.scss 47:5           @content
  node_modules\@angular\material\core\theming\_theming.scss 402:3            private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\theming\_all-theme.scss 44:3           all-component-themes()
  src\lawyer.scss 27:1                                                       root stylesheet
  node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 60:7  @content
  node_modules\@angular\material\core\theming\_theming.scss 402:3            private-check-duplicate-theme-styles()
  node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 54:3  theme()
  node_modules\@angular\material\core\theming\_all-theme.scss 47:5           @content
  node_modules\@angular\material\core\theming\_theming.scss 402:3            private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\theming\_all-theme.scss 44:3           all-component-themes()
  src\lawyer.scss 27:1                                                       root stylesheet

自定义主题代码 #

@use '@angular/material' as mat;

@include mat.core();

/*The define-palette Sass function accepts a color palette, described in the Palettes section above,
as well as four optional hue numbers.
These four hues represent, in order: the "default" hue, a "lighter" hue, a "darker" hue, and a "text" hue.*/

$my-primary: mat.define-palette(mat.$indigo-palette, 800);
$my-accent: mat.define-palette(mat.$green-palette, A700);
$my-warn: mat.define-palette(mat.$red-palette,A700);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));


//@include mat.core-theme($my-theme);
//@include mat.button-theme($my-theme);

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

问题根源 #

测试确认错误由最后一行@include mat.all-component-themes($my-theme);引发，改用mat.core-theme和单个组件主题（如mat.button-theme）可正常构建。原因是Angular Material 15全面切换为MDC-based组件后，all-component-themes内部依赖的主题校验mixin未被正确加载，部分组件（如progress-bar）的主题逻辑依赖该mixin。

解决方法 #

• 统一Angular Material版本
  检查所有@angular/material相关包版本是否一致，执行以下命令查看：

  npm ls @angular/material
  

  若存在版本不一致的包，重新安装统一的15.x版本：

  npm install @angular/material@15.x.x
  

• 完善主题配置
  在主题定义中补充typography和density配置（即使使用默认值），确保主题结构符合Angular Material 15的要求：

  $my-theme: mat.define-light-theme((
    color: (
      primary: $my-primary,
      accent: $my-accent,
      warn: $my-warn,
    ),
    typography: mat.define-typography-config(),
    density: 0,
  ));
  

• 逐个导入组件主题（替代方案）
  若上述方法无效，暂时替换mat.all-component-themes为逐个导入所需组件的主题，避免加载未使用的组件主题引发错误：

  @include mat.core-theme($my-theme);
  @include mat.button-theme($my-theme);
  @include mat.progress-bar-theme($my-theme);
  // 根据项目需求添加其他组件主题
  

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