Angular 17升级至18后theme.scss中Angular Material出现未定义函数报错

Angular Material 18重构了主题系统，旧的mat.define-palette、mat.define-light-theme等函数已被移除，这是导致你遇到Undefined function错误的核心原因。以下是修改后的完整theme.scss代码，直接替换即可解决问题：

@use '@angular/material' as mat;

// 定义自定义主题（使用新API）
$ms-ss-theme: mat.theme(
  (
    color: (
      // 使用mat.palette指定调色板及对应色调
      primary: mat.palette(mat.$blue-grey-palette, 500),
      accent: mat.palette(mat.$cyan-palette, A200),
      warn: mat.palette(mat.$red-palette)
    )
  )
);

// 应用主题到所有组件
@include mat.all-component-themes($ms-ss-theme);


// Theme Overrides（这部分无需修改）
.mat-calendar,
.mat-simple-snackbar,
.mat-button,
.mat-raised-button,
.mat-icon-button,
.mat-stroked-button,
.mat-flat-button,
.mat-fab,
.mat-mini-fab {
    @include font-fira-sans-regular;
}

.mat-calendar {
    font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    min-width: 160px !important;
    max-width: 75vw !important;
}

.custom-modal .mat-dialog-container {
  border-radius: 8px;
  box-shadow: 0 5px 18px 0 rgba(155, 155, 155, 0.3);
  padding: 30px 60px;
  max-width: 680px;
}

.mat-dialog-content {
  border-bottom: 2px solid $color-grey;
}

// Snackbar styles
.mat-snack-bar-container {
    min-width: 160px !important;
    max-width: 75vw !important;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    margin-bottom: 1em !important;
}

.mat-simple-snackbar {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
}

.mat-snack-bar-container .mat-button {
    @include font-fira-sans-medium;
    font-size: 16px;
    color: white;
    background: rgba(0, 0, 0, 0.15);
}

// Responsive Styles
@media print {
  .mat-snack-bar-container {
    display: none !important;
  }
}

@media (max-width: 768px) { 
  .mat-snack-bar-container {
    font-size: 14px;
    max-width: none !important;
  }
  .mat-snack-bar-container .mat-button {
    font-size: 14px;
    line-height: 16px;
    padding: 8px;
  }
}

@media (max-width: 576px) { 
  .custom-modal {
    max-width: calc(100vw - 20px) !important;
  }
}

关键变化说明： #

• 移除了旧的mat.define-palette，改用mat.palette函数直接指定调色板和色调
• 用mat.theme替代mat.define-light-theme，主题配置结构更简洁
• 组件主题应用的@include mat.all-component-themes($ms-ss-theme);语法保持兼容，无需修改

修改后重新执行ng serve即可正常构建。

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