Angular Material自定义调色板创建报错：未定义mat.$m2-light-blue变量

你的错误来自两个核心问题：

• 你引用的mat.$m2-light-blue并非Angular Material内置的调色板变量，对应的内置浅色蓝调色板变量是mat.$light-blue
• 你已经手动定义了自定义调色板$m2-custom-palette，却没有使用它；同时在新的Sass模块语法（@use）下，应该使用mat.define-palette而非mat.m2-define-palette

修正后的完整代码如下：

@use "@angular/material" as mat;
@include mat.core();

// 自定义调色板
$m2-custom-palette: (
  50: #e1f5fe,
  100: #b3e5fc,
  200: #81d4fa,
  300: #81d4fa,
  400: #29b6f6,
  500: #03a9f4,
  600: #039be5,
  700: #0288d1,
  800: #0277bd,
  900: #01579b,
  contrast: (
    50: #000,
    100: #000,
    200: #000,
    300: #fff,
    400: #fff,
    500: #fff,
    600: #fff,
    700: #fff,
    800: #fff,
    900: #fff,
  ),
);

// 使用自定义调色板生成primary主题变量
$my-primary: mat.define-palette($m2-custom-palette, 500);

// 可选：完成主题定义并全局应用
$my-accent: mat.define-palette(mat.$pink-palette, A200);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));

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

补充说明 #

• 如果你想直接使用Angular Material内置的浅色蓝调色板，无需自定义，直接写：

  $my-primary: mat.define-palette(mat.$light-blue, 500);
  

• @use是Angular Material v14及以上版本推荐的Sass语法，旧版本可能用@import，对应的函数命名也会有差异，请确保版本匹配

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