Angular项目中mat-core()混合器未定义报错，求解决

核心排查与修复步骤 #

• 严格遵循导入顺序
  必须先导入Angular Material的核心主题文件，再调用mat-core混入。正确的styles.scss结构示例：

  // 先导入Material核心样式依赖
  @import '@angular/material/theming';
  
  // 调用mat-core混入
  @include mat-core();
  
  // 后续定义主题（示例）
  $primary-palette: mat-palette($mat-blue);
  $accent-palette: mat-palette($mat-amber, A200, A100, A400);
  $warn-palette: mat-palette($mat-red);
  
  $app-theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette);
  @include angular-material-theme($app-theme);
  

• 确认依赖完整性
  确保已通过官方命令完成Angular Material的安装，避免手动安装遗漏依赖：

  ng add @angular/material
  

  检查package.json，确保@angular/material、@angular/cdk、@angular/animations的版本与Angular核心版本完全匹配。

• 验证样式配置正确性
  打开angular.json，确认styles数组中正确包含src/styles.scss，无重复或冲突的配置项：

  "styles": [
    "src/styles.scss"
  ]
  

• 清理缓存并重启服务
  缓存异常可能导致编译错误，执行以下命令重置环境：

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

自定义主题文件场景处理 #

如果使用独立的主题文件（如src/theme.scss），需确保主题文件内部先导入核心依赖并调用mat-core，再在styles.scss中导入主题文件：

src/theme.scss示例：

@import '@angular/material/theming';
@include mat-core();

// 定义主题逻辑
$app-theme: mat-light-theme(...);
@include angular-material-theme($app-theme);

src/styles.scss中导入：

@import './theme.scss';

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