Angular14自定义Material主题报SassError:$map:null is not a map错误

这个报错和map.get是否替换为map-get没有任何关系，是Angular Material 14版本的主题API传参不符合规范导致的。
Angular Material 14的mat.define-light-theme方法要求入参必须包含完整的配置结构，其中color配置块下必须同时传入primary、accent、warn三个调色板，你当前代码只传入了自定义的primary调色板，结构缺失导致框架内部读取前景色配置时拿到null值，最终抛出「null is not a map」的错误。

按照以下步骤调整你的主题文件即可，不需要修改node_modules内的框架源码：

• 补全必须的两个调色板定义：除了你自定义的主色板，还需要定义accent（强调色）、warn（错误/警告色）板，可以直接使用Angular Material内置的调色板，不需要手动编写完整色值
• 调整mat.define-light-theme的传参结构，将所有调色板包裹在color配置项中传入，同时补全默认的排版、密度配置
• 保留原有的全局组件主题引入逻辑即可

修复后的完整主题代码如下：

@use '@angular/material' as mat;
/* You can add global styles to this file, and also import other style files */

@include mat.core();

$f-brand: (
  50 : #e0f2f1,
  100 : #b3e0db,
  200 : #80cbc4,
  300 : #4db6ac,
  400 : #26a69a,
  500 : #009688,
  600 : #008e80,
  700 : #008375,
  800 : #00796b,
  900 : #006858,
  A100 : #97ffec,
  A200 : #64ffe3,
  A400 : #31ffda,
  A700 : #18ffd5,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #ffffff,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

$primary: mat.define-palette($f-brand);
// 补全必须的强调色、警告色调色板，使用内置色板即可
$accent: mat.define-palette(mat.$teal-palette, 200);
$warn: mat.define-palette(mat.$red-palette);

// 按照14版本API要求构造主题配置
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

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

注意：不要尝试修改node_modules下的框架源码替换map.get写法，map.get是Sass模块化标准语法，Angular Material 14原生支持该写法，修改源码只会在下次依赖安装时被还原，无法从根本解决问题。

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