Angular 13引入kendo-theme-bootstrap报SassError: $color: null is not a color

针对你遇到的SassError: $color: null is not a color错误，可通过以下几种配置调整修复：

• 匹配主题与Angular版本
  Angular 13需搭配对应版本的kendo-theme-bootstrap，建议锁定主题版本为^5.12.0（该版本与Angular 13兼容性稳定），更新package.json中的依赖后重新安装。

• 调整SCSS导入顺序
  确保在导入Kendo主题前先加载Bootstrap的SCSS变量文件，让Kendo能正确读取Bootstrap的颜色变量：

  // 先导入Bootstrap变量
  @import "~bootstrap/scss/variables";
  // 再导入Kendo主题
  @import "~@progress/kendo-theme-bootstrap/scss/all";
  

• 显式声明缺失的颜色变量
  如果项目未完整引入Bootstrap变量，手动声明Kendo主题依赖的核心颜色变量，避免出现null值：

  // 声明必要的Bootstrap颜色变量
  $primary: #0d6efd;
  $secondary: #6c757d;
  $success: #198754;
  $info: #0dcaf0;
  $warning: #ffc107;
  $danger: #dc3545;
  
  // 导入Kendo主题
  @import "~@progress/kendo-theme-bootstrap/scss/all";
  

• 清理依赖与缓存
  执行以下命令清理可能存在的缓存和损坏依赖：

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

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