Angular 15定义Material主题时出现Undefined mixin错误

问题描述 #

升级项目到Angular 15.2.1并使用对应版本的Material Design包后，按照官方文档编写主题代码时出现Sass编译错误，提示Undefined mixin. @include theme.validate-theme-styles($light-theme, $theme);，错误溯源到mat.all-component-themes方法调用。

错误日志：

./src/styles.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 403: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 403:3            private-check-duplicate-theme-styles()
  node_modules/@angular/material/core/theming/_all-theme.scss 44:3           all-component-themes()
  src/styles.scss 24:1                                                       root stylesheet

使用的主题代码（来自官方文档）：

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

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

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

解决方案 #

1. 手动引入缺失的MDC主题模块 #

在styles.scss开头添加对@material/linear-progress/theme的引用，补充缺失的mixin定义：

@use '@angular/material' as mat;
@use '@material/linear-progress/theme' as theme; // 新增此行，引入缺失的mixin

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

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

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

2. 确保依赖版本完全一致 #

检查所有@angular/material相关包的版本是否统一为15.2.1，避免版本不一致导致的依赖冲突：

npm list @angular/material

如果存在不同版本，删除node_modules和package-lock.json（或yarn.lock）后重新安装：

rm -rf node_modules package-lock.json
npm install

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

清理Angular构建缓存后重新启动项目：

ng build --clean
# 或者启动开发服务器
ng serve --open

原因说明 #

Angular 15.x版本在整合Material Design Components (MDC)时，部分底层组件的Sass mixin未被上层@angular/material模块自动导入，导致theme.validate-theme-styles这类内部mixin无法被识别，手动引入对应的MDC主题模块即可解决。

内容的提问来源于stack exchange，提问作者Manuel S.