Angular 15 Material主题配置报错：SassError: $map: null is not a map

你遇到的错误是因为Angular Material 15的主题结构发生了变化，你手动构建的$theme对象不符合内部样式函数的预期：foreground和background属性应该嵌套在color对象内部，而不是作为$theme的顶级属性。

具体修改步骤 #

1. 删除手动构建的$theme对象，改用Angular Material提供的mat.define-light-theme（对应浅色主题）或mat.define-dark-theme函数生成主题，这个函数会自动处理正确的结构嵌套。
2. 在define-light-theme的配置中，将自定义的$mat-light-theme-foreground和$mat-light-theme-background传入color配置项内。

修改后的完整代码示例 #

@use 'sass:map';
@use '@angular/material' as mat;
@include mat.legacy-core();
$typography: mat.define-legacy-typography-config();

// 自定义前景色板（保留原有定义）
$mat-light-theme-foreground: (
  base: black,
  divider: $dark-dividers,
  dividers: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba($dark-text, 0.26),
  disabled-text: $dark-disabled-text,
  elevation: black,
  secondary-text: $dark-accent-text,
  hint-text: $dark-disabled-text,
  accent-text: $dark-accent-text,
  icon: $dark-accent-text,
  icons: $dark-accent-text,
  text: $dark-primary-text,
  slider-min: $dark-primary-text,
  slider-off: rgba($dark-text, 0.26),
  slider-off-active: $dark-disabled-text,
);

// 自定义背景色板（保留原有定义）
$mat-light-theme-background: (
  background: $light-background,
  status-bar: $light-bg-darker-20,
  app-bar: $light-bg-darker-5,
  hover: $dark-bg-alpha-4,
  card: $light-bg-lighter-5,
  dialog: $light-bg-lighter-5,
  tooltip: $dark-bg-tooltip,
  disabled-button: $dark-bg-alpha-12,
  raised-button: $light-bg-lighter-5,
  focused-button: $dark-focused,
  selected-button: $light-bg-darker-20,
  selected-disabled-button: $light-bg-darker-30,
  disabled-button-toggle: $light-bg-darker-10,
  unselected-chip: $light-bg-darker-10,
  disabled-list-option: $light-bg-darker-10,
);

// 主色调定义（保留原有定义）
$mat-primary: (
  main: #009534,
  lighter: #b3dfc2,
  darker: #007821,
  200: #009534, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);

// 强调色调定义（保留原有定义）
$mat-accent: (
  main: #009534,
  lighter: #b3dfc2,
  darker: #007821,
  200: #009534, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);

// 警告色调定义（保留原有定义）
$mat-warn: (
  main: #ff0000,
  lighter: #ffb3b3,
  darker: #ff0000,
  200: #ff0000, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);

// 关键修改：用define-light-theme构建主题
$theme: mat.define-light-theme((
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
    // 将前景和背景放在color对象内部
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background
  ),
  typography: $typography,
  density: 0
));

// 主题初始化（保留原有调用）
@include mat.all-component-themes($theme);
@include mat.all-legacy-component-themes($theme);

错误原因解析 #

Angular Material 15的内部样式函数（比如处理前景色的逻辑）会从$theme.color.foreground读取配置，而你之前把foreground放在$theme的顶级位置，导致内部函数获取到的$foreground为null，调用map.get(null, base)就触发了$map: null is not a map的错误。

使用官方提供的define-light-theme/define-dark-theme函数构建主题，能确保所有属性的嵌套结构符合框架预期，避免这类手动配置的错误。

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