Angular12升级至13时遇Sass调色板Hue不存在错误求助

将项目从Angular 12升级到Angular 13过程中，出现如下Sass错误：Hue "100" does not exist in palette. Available hues are: primary, accent, contrast，目前未找到解决办法，恳请提供解决方向。

相关信息 #

package.json配置 #

{
  "name": "test-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "testci": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",
    "testci2": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.3.13",
    "@angular/animations": "^12.2.17",
    "@angular/cdk": "^12.2.13",
    "@angular/common": "^12.2.17",
    "@angular/compiler": "^12.2.17",
    "@angular/core": "^12.2.17",
    "@angular/forms": "^12.2.17",
    "@angular/material": "^12.2.13",
    "@angular/material-moment-adapter": "^12.2.13",
    "@angular/platform-browser": "^12.2.17",
    "@angular/platform-browser-dynamic": "^12.2.17",
    "@angular/router": "^12.2.17",
    "@mat-datetimepicker/core": "5.1.0",
    "@mat-datetimepicker/moment": "5.1.0",
    "bootstrap": "^4.3.1",
    "bufferutil": "^4.0.7",
    "core-js": "^2.6.2",
    "d3": "^5.9.2",
    "file-saver": "2.0.0",
    "jquery": "^3.4.1",
    "karma-tfs-reporter": "^1.0.2",
    "lodash-es": "^4.17.15",
    "moment": "^2.29.4",
    "ngx-bootstrap": "4.3.0",
    "ngx-loading": "^8.0.0",
    "ngx-mat-select-search": "^3.1.1",
    "popper.js": "1.14.6",
    "rxjs": "^6.6.3",
    "sass": "^1.56.1",
    "simplebar": "^3.1.3",
    "timelines-chart": "^2.8.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.18",
    "@angular/cli": "~12.2.18",
    "@angular/compiler-cli": "^12.2.17",
    "@angular/language-service": "^12.2.17",
    "@types/d3": "^5.7.2",
    "@types/jasmine": "~3.3.6",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "^12.11.1",
    "angular2-template-loader": "^0.6.2",
    "codelyzer": "^5.1.2",
    "electron": "^4.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-junit-reporter": "^1.2.0",
    "karma-sonarqube-unit-reporter": "0.0.23",
    "protractor": "~7.0.0",
    "puppeteer": "^1.20.0",
    "ts-node": "~7.0.1",
    "tslint": "~6.1.0",
    "typescript": "4.3.5",
    "typescript-tslint-plugin": "^0.5.5",
    "wallaby-webpack": "^3.9.13"
  }
}

错误堆栈信息 #

SassError: 'Hue "100" does not exist in palette. Available hues are:
primary, accent, contrast'    
╷ 55 │     lighter: _get-color-from-palette($base-palette, $lighter),    
│              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^    
╵
node_modules@angular\material\core\theming_theming.scss 55:14  define-palette()
node_modules@angular\material\core\theming_theming-deprecated.scss 16:11  palette()   
src\app\search.component.scss 64:11  @import   
src\app\results.component.scss 5:9  root stylesheet

组件SCSS自定义样式 #

$mat-buttons: (
  primary: #00f,
  accent: $btn-secondary-bg,
  contrast: (
    primary: #0f0,
    accent: $btn-secondary-color
  )
);
$primary: mat-palette($mat-buttons, primary);
$accent: mat-palette($mat-buttons, accent);

解决方向 #

• 同步Angular Material版本：当前项目Angular核心版本已升级到13，但@angular/material和@angular/cdk仍停留在12.x，版本不匹配会导致主题函数逻辑冲突，需将这两个依赖升级到13.x版本。
• 修复自定义调色板结构：Angular Material 13要求调色板包含标准色调（如50、100、200...900等），你当前的$mat-buttons仅定义了primary、accent、contrast，缺少必要的色调值，导致define-palette无法找到100色调。可通过两种方式修复：
  1. 基于官方预设调色板扩展：

     $mat-buttons: mat-palette($mat-blue, 500, 100, 900); // 主色调500，浅色100，深色900
     

  2. 手动定义完整调色板结构：

     $mat-buttons: (
       50: #e3f2fd,
       100: #bbdefb,
       200: #90caf9,
       300: #64b5f6,
       400: #42a5f5,
       500: #2196f3,
       600: #1e88e5,
       700: #1976d2,
       800: #1565c0,
       900: #0d47a1,
       primary: #2196f3,
       accent: #42a5f5,
       contrast: (
         50: #000000,
         100: #000000,
         200: #000000,
         300: #000000,
         400: #000000,
         500: #ffffff,
         600: #ffffff,
         700: #ffffff,
         800: #ffffff,
         900: #ffffff,
       )
     );
     

• 替换废弃主题函数：错误堆栈显示调用了废弃的palette()函数，Angular 13建议使用define-palette和mat-light-theme/mat-dark-theme来定义主题，避免依赖旧版废弃API。
• 清理依赖缓存：删除node_modules、package-lock.json文件，重新执行npm install，确保所有依赖都是对应版本，避免旧代码残留。

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