Angular 19中引入Angular Material自定义主题时出现Undefined mixin错误

我太懂这种跟着官方示例写代码却报错的郁闷了！别慌，咱们来拆解下你遇到的问题：

你碰到的Undefined mixin错误，核心原因是Angular Material 19的主题API导入路径和初始化步骤和你用的示例没完全匹配，具体解决方法如下：

1. 修正SCSS的导入路径 #

你当前用的是@use '@angular/material' as mat;，但Angular Material 19把主题相关的mixin、变量都单独放在了@angular/material/theme路径下，根路径的包并没有导出theme这个mixin。所以第一步要把导入语句改成：

@use '@angular/material/theme' as mat;

2. 先初始化Material核心样式 #

在应用主题之前，必须先调用Material的核心初始化mixin，它会设置基础的样式重置、字体配置等，否则主题mixin也无法正常工作。在你的代码里加上这一行：

@include mat.core();

3. 修正主题配置的语法问题 #

你代码里写的typography: Roboto是不合法的——typography参数需要的是一个配置对象，而不是字符串。你需要用Material提供的mat.define-typography-config()来定义字体配置，如果你想指定Roboto字体，只需要确保项目已经引入Roboto（可以通过index.html加link标签，或者在SCSS里导入），mat.core()会自动将它作为默认字体。

修正后的完整代码 #

把这些调整后，你的styles.scss里的主题代码应该是这样的：

@use '@angular/material/theme' as mat;

html {
  color-scheme: light dark;
}

// 先初始化核心样式
@include mat.core();

// 应用全局核心主题
@include mat.core-theme((
  color: mat.$violet-palette,
  typography: mat.define-typography-config(),
  density: 0
));
// 给所有Material组件应用主题
@include mat.all-component-themes((
  color: mat.$violet-palette,
  typography: mat.define-typography-config(),
  density: 0
));

额外检查项 #

• 确认你安装的@angular/material版本是19.x，和你的Angular版本完全匹配：可以在项目根目录执行npm list @angular/material查看版本，如果不匹配，重新安装对应版本：npm install @angular/material@19
• 确保你的SCSS预处理器配置正确，Angular 19默认支持SCSS，这个一般不会有问题，但如果是自定义配置，要确认angular.json里的样式处理器设置正确。

内容来源于stack exchange