Angular 15升级后ng build报错：SassError: $color: null is not a color

以下是具体排查和解决步骤：

• 检查主题基础变量的完整定义
  确保$app-primary、$app-accent、$app-warn是通过mat.define-palette正确初始化的，不能为null或未定义。示例正确定义：

  // variables.scss
  $app-primary: mat.define-palette(mat.$indigo-palette);
  $app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
  $app-warn: mat.define-palette(mat.$red-palette);
  
  $myapp-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn);
  

• 确认样式文件的导入顺序
  在styles.scss中必须先导入定义主题的variables.scss，再调用mat.all-component-colors，否则主题变量未初始化就会传入null值：

  // styles.scss
  @import './variables.scss';
  @include mat.all-component-colors($myapp-theme);
  

• 排查组件级样式的主题冲突
  检查项目中所有使用<mat-progress-bar>的组件，确认组件内部的scss文件没有错误覆盖主题变量，比如避免出现mat-progress-bar { color: null; }这类无效赋值，或者错误的Sass变量引用。

• 清理缓存并重装依赖
  旧缓存或损坏的依赖可能导致主题渲染异常，执行以下命令重置环境：

  rm -rf node_modules
  rm package-lock.json
  npm install
  ng cache clean
  

  完成后重新运行ng build或ng serve。

• 对齐Angular与Material版本
  确保@angular/material与@angular/core的版本完全一致（均为15.x.x），版本不匹配会导致主题函数参数处理异常。查看package.json中的依赖版本，若不一致，执行对应版本的安装命令：

  npm install @angular/material@<你的Angular版本号>
  

• 验证主题初始化流程
  Angular 15中需要先调用mat.core()初始化Material的基础样式变量，再应用组件主题颜色，确保styles.scss的结构如下：

  // styles.scss
  @import '@angular/material/theming';
  @import './variables.scss';
  
  @include mat.core();
  @include mat.all-component-colors($myapp-theme);
  

内容的提问来源于stack exchange，提问作者A-B