SassError：调色板中不存在色调“100”。可用的色调有：原色、强调色、对比色

Question

我正在从 Angular 12更新到 13。

\n

看到这个错误，目前还没有找到解决办法。有人能指出我正确的方向吗？

\n

我的package.json

\n

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

\n

\n

SassError: \'调色板中不存在色调“100”。可用的色调有：\n原色、强调色、对比度\' \xe2\x95\xb7 55 \xe2\x94\x82 浅色：\n_get-color-from-palette($base-palette, $lighter), \xe2\x94\ x82 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ \ xe2\x95\xb5
\nnode_modules@angular\\material\\core\\theming_theming.scss 55:14
\ndefine-palette()
\nnode_modules@angular\\material\\core\\theming_theming-deprecated.scss\n16:11 Palette() src\\app\\search.component.scss 64:11
\n@import src\\app\\results.component.scss 5:9 根样式表

\n

\n

\n

我们在组件 scss 中添加的样式

\n

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

\n

Answer 1

为每种颜色至少定义三种色调：100、500和700。请参阅文档。

$indigo-palette: (
 50: #e8eaf6,
 100: #c5cae9,
 200: #9fa8da,
 300: #7986cb,
 // ... continues to 900
 contrast: (
   50: rgba(black, 0.87),
   100: rgba(black, 0.87),
   200: rgba(black, 0.87),
   300: white,
   // ... continues to 900
 )
);

编辑

改变这个...

$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);

……对此。更改十六进制颜色值（即 、#F5F5F5和#808080）#202020。

$mat-buttons: (
  100: #F5F5F5,
  500: #808080,
  700: #202020,
  contrast: (
    100: rgba(black, 0.87),
    500: rgba(black, 0.87),
    700: rgba(black, 0.87)
  )
);

$primary: mat-palette($mat-buttons, 500);
$accent: mat-palette($mat-buttons, 700);