使用Angular Material主题调色板时SASS报$theme未定义的排查

你的错误根源在于缺少完整的Angular Material主题定义流程，且当前代码中可能存在未展示的部分在引用$theme变量，而你并未创建这个变量。

具体问题拆解 #

1. 你仅定义了调色板$my-palette，但Angular Material的主题系统需要将调色板组合成完整的主题对象，才能生成包含$theme在内的可用主题变量。
2. Ag Grid的ag-theme-material.css可能间接依赖Angular Material的主题变量，若未提前定义完整主题，就会触发$theme未定义的错误。

修复步骤 #

按照以下流程修改你的SASS代码：

@use 'sass:map';
@use '@angular/material' as mat;

// 1. 先引入全局样式
@import './styles/normalize.css';

// 2. 定义调色板（可替换为你需要的色系）
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-warn: mat.define-palette(mat.$red-palette);

// 3. 生成完整主题对象（关键！这一步会创建$theme变量）
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));

// 4. 让Angular Material应用主题
@include mat.all-component-themes($my-theme);

// 5. 最后引入Ag Grid相关样式
@import 'ag-grid-community/styles/ag-grid.css';
@import 'ag-grid-community/styles/ag-theme-material.css';

额外说明 #

• 若不需要自定义调色板，可直接使用Angular Material的预设主题简化代码：

  @use '@angular/material' as mat;
  @include mat.core();
  @include mat.all-component-themes(mat.$indigo-pink-theme);
  

• 确保所有依赖主题变量的样式都在主题定义之后引入，避免变量未定义的错误。

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