Angular 11升级至15后sass-loader编译失败问题求助

问题根源 #

Angular Material 15 中，mat.define-legacy-typography-config 属于旧版遗留 API，升级后若样式文件中重复声明该函数，或调用方式不符合新版本 Sass 语法规则，会直接触发编译错误。同时 Angular 15 对 Sass 相关依赖版本要求更严格，旧配置写法不再兼容。

修复步骤 #

1. 移除重复的函数定义 #

打开 cragcity-theme.scss 第 90 行，确认是否存在重复书写的 @function mat.define-legacy-typography-config(...) 代码段。如果是，直接删除重复部分——该函数是 Angular Material 内置方法，无需自行重复声明。

2. 迁移到新版 Typography 配置（推荐） #

既然已升级到 Angular 15，建议逐步替换遗留 API 为新版规范：

• 旧遗留写法：

$custom-typography: mat.define-legacy-typography-config(
  $font-family: 'Roboto, sans-serif',
  // 其他旧版配置项
);

• 新版写法：

$custom-typography: mat.typography-config(
  $font-family: 'Roboto, sans-serif',
  $headline-large: mat.typography-level(32px, 40px, 700),
  // 按新版规范定义各层级样式
);

• 主题应用更新：

$cragcity-theme: mat.define-theme(
  $typography: $custom-typography,
  // 其他主题配置
);

3. 对齐依赖版本 #

确保 Sass 相关依赖与 Angular 15 兼容，在 package.json 中调整版本后执行更新：
推荐依赖版本示例：

"devDependencies": {
  "sass": "^1.55.0",
  "sass-loader": "^13.1.0",
  "@angular/material": "^15.2.9"
}

执行更新命令：

npm install sass@^1.55.0 sass-loader@^13.1.0 --save-dev

4. 清理缓存重新编译 #

ng cache clean
npm run build

验证修复 #

重启项目 ng serve，检查编译错误是否消失。若仍有问题，排查其他引用旧版遗留 API 的代码段，逐一修正替换即可。

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