Angular 17升级至19.2.6后出现Sass函数未定义错误

问题描述 #

升级后触发以下构建错误：

./src/styles.scss - 错误：模块构建失败（来自./node_modules/sass-loader/dist/cjs.js）：
函数未定义。
╷
14 │ $abc-primary: mat.define-palette(mat.$indigo-palette);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\styles.scss 14:19 root stylesheet

./src/styles.scss?ngGlobalStyle - 错误：模块构建失败（来自./node_modules/mini-css-extract-plugin/dist/loader.js）：
HookWebpackError: 模块构建失败（来自./node_modules/sass-loader/dist/cjs.js）：
函数未定义。
╷
14 │ $abc-primary: mat.define-palette(mat.$indigo-palette);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\styles.scss 14:19 root stylesheet

原styles.scss代码：

@use '@angular/material' as mat;
@include mat.core();
$abc-primary: mat.define-palette(mat.$indigo-palette);
$abc-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

错误原因 #

Angular Material 19 重构了 Sass API：

• define-palette 函数从顶层 mat 命名空间迁移至 mat.palette 子模块
• 默认调色板变量名变更，比如 mat.$indigo-palette 改为 mat.palette.$indigo

修复方案 #

修改styles.scss中的调色板相关代码，适配新API：

@use '@angular/material' as mat;
@include mat.core();
// 使用新的palette子模块API和变量名
$abc-primary: mat.palette.define-palette(mat.palette.$indigo);
$abc-accent: mat.palette.define-palette(mat.palette.$pink, A200, A100, A400);

额外检查 #

如果项目中还有其他使用旧版Material Sass API的代码（比如自定义主题、组件样式），需要同步调整：

• 所有调色板相关函数（如define-light-theme、define-dark-theme）均迁移至mat.palette或mat.theme子模块
• 调色板变量统一使用mat.palette.$[颜色名]格式

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