Angular应用从v11升级v12后执行ng serve启动报错

升级后执行ng serve触发的两个报错分别由Webpack静态资源规则变更、依赖版本不兼容+Sass语法校验升级导致，按以下步骤修复即可：

一、Leaflet PNG图片解析失败修复 #

Angular 12内置Webpack 5，不再自动为node_modules下的图片资源匹配加载器，导致Leaflet自带的marker图标二进制文件无法被解析。
修复操作：

• 打开angular.json，找到项目构建配置下的assets数组（路径为projects.[你的项目名].architect.build.options.assets），添加Leaflet静态资源映射：

{
  "glob": "**/*",
  "input": "./node_modules/leaflet/dist/images",
  "output": "/assets/"
}

• 在使用Leaflet的业务代码中，初始化地图前手动指定图标资源路径：

import * as L from 'leaflet';

// 修复默认图标路径指向
delete (L.Icon.Default.prototype as any)._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'assets/marker-icon-2x.png',
  iconUrl: 'assets/marker-icon.png',
  shadowUrl: 'assets/marker-shadow.png'
});

• 如果之前自定义过Webpack的file-loader、url-loader规则，全部删除，Angular 12内置的静态资源处理能力已经覆盖图片加载场景，额外配置会触发冲突。

二、Fuse主题$contrast变量未定义报错修复 #

该报错由两个问题共同导致：

• 当前安装的@angular/flex-layout为v10 beta版本，与Angular 12版本不兼容，Sass变量传递规则不匹配
• Angular 12内置Dart Sass处理器默认启用严格作用域校验，旧版Fuse主题的mixin未做变量兜底，加上导入顺序错误时会读不到Angular Material主题内置的$contrast变量
  修复操作：
• 先升级flex-layout到Angular 12兼容版本：

npm install @angular/flex-layout@12.0.0-beta.35 --save

• 打开报错的src/@fuse/scss/partials/_colors.scss文件，定位到fuse-color-classes mixin定义位置，在mixin开头添加变量兜底：

@mixin fuse-color-classes() {
  // 新增变量兜底，兼容严格Sass作用域校验
  $contrast: null !default;
  // 保留原有逻辑
  @if ($color != null and $contrast != null) {
    // 原有样式代码无需改动
  }
}

• 调整src/styles.scss的导入顺序，必须先导入Angular Material主题文件，再导入Fuse核心样式，参考顺序：

// 优先导入Angular Material依赖
@use '~@angular/material' as mat;
@import '~@angular/material/theming';
// 再导入Fuse主题核心
@import '~@fuse/scss/core';
// 最后编写自定义全局样式

所有修改完成后，删除项目根目录下的.angular缓存文件夹、node_modules文件夹，重新执行npm install安装依赖，再运行ng serve即可正常启动。

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