Angular 18迁移自定义主题报错：mat.define-palette函数未定义

问题 #

将Angular 16项目迁移至Angular 18后，自定义Material主题时出现编译错误，提示mat.define-palette为未定义函数。

原SCSS代码 #

@use '@angular/material' as mat;

// Define custom palettes for NAPSA colors
$napsa-blue: (
  50: #e4e6ec,
  100: #bcc0d0,
  200: #9096b0,
  300: #646b90,
  400: #424c79,
  500: #212c61,
  600: #1d2759,
  700: #18214f,
  800: #141b45,
  900: #0b1033,
  A100: #6e7cff,
  A200: #3b4eff,
  A400: #0820ff,
  A700: #0016ee,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff,
  ),
);

$napsa-orange: (
  50: #fef4e3,
  100: #fee4ba,
  200: #fdd28c,
  300: #fcc05e,
  400: #fbb33c,
  500: #faa519,
  600: #f99d16,
  700: #f99312,
  800: #f88a0e,
  900: #f67908,
  A100: #ffffff,
  A200: #fff4eb,
  A400: #ffd7b8,
  A700: #ffc89f,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #000000,
    600: #000000,
    700: #000000,
    800: #000000,
    900: #000000,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

// Define palettes using the new theming API
$light-primary: mat.define-palette($napsa-blue);
$light-accent: mat.define-palette($napsa-orange);
$dark-primary: mat.define-palette($napsa-blue);
$dark-accent: mat.define-palette($napsa-orange);

// Define themes using mat.createTheme()
$light-theme: mat.create-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent,
    background: mat.define-palette(mat.$grey-palette),
  )
));

$dark-theme: mat.create-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    background: mat.define-palette(mat.$grey-palette, 900),
  ),
  is-dark: true
));

// Apply all component themes for the light theme
@include mat.all-component-themes($light-theme);

报错信息 #

Undefined function.
   ╷
72 │ $light-primary: mat.define-palette($napsa-blue);
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/napsa.scss 72:17  root stylesheet

./src/napsa.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined function.
   ╷
71 │ $light-primary: mat.define-palette($napsa-blue);
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/napsa.scss 71:17  root stylesheet



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

解决方案 #

Angular 18对应的Material v18版本彻底移除了mat.define-palette等旧主题函数，同时调整了主题配置语法，以下是修改后的可运行代码：

修改后的SCSS代码 #

@use '@angular/material' as mat;
@use '@angular/material/core' as core;

// 自定义颜色映射（无需修改）
$napsa-blue: (
  50: #e4e6ec,
  100: #bcc0d0,
  200: #9096b0,
  300: #646b90,
  400: #424c79,
  500: #212c61,
  600: #1d2759,
  700: #18214f,
  800: #141b45,
  900: #0b1033,
  A100: #6e7cff,
  A200: #3b4eff,
  A400: #0820ff,
  A700: #0016ee,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff,
  ),
);

$napsa-orange: (
  50: #fef4e3,
  100: #fee4ba,
  200: #fdd28c,
  300: #fcc05e,
  400: #fbb33c,
  500: #faa519,
  600: #f99d16,
  700: #f99312,
  800: #f88a0e,
  900: #f67908,
  A100: #ffffff,
  A200: #fff4eb,
  A400: #ffd7b8,
  A700: #ffc89f,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #000000,
    600: #000000,
    700: #000000,
    800: #000000,
    900: #000000,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

// 直接使用颜色映射创建主题，无需mat.define-palette包装
$light-theme: mat.create-theme((
  color: (
    primary: $napsa-blue,
    accent: $napsa-orange,
    background: mat.$grey, // 替换mat.$grey-palette为mat.$grey
  )
));

$dark-theme: mat.create-theme((
  color: (
    primary: $napsa-blue,
    accent: $napsa-orange,
    background: mat.$grey,
  ),
  is-dark: true
));

// 从core模块引入并应用组件主题
@include core.all-component-themes($light-theme);

关键修改点 #

• 移除所有mat.define-palette调用：v18中无需用该函数包装颜色映射，直接传递原始颜色对象即可
• 替换mat.$grey-palette为mat.$grey：Material v18调整了内置灰色调色板的变量名
• 引入@angular/material/core并使用core.all-component-themes：原mat.all-component-themes已迁移至core模块
• 暗色主题背景无需指定色调：主题会根据is-dark自动适配背景色，若需自定义可在color.background中指定具体色调值

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