Angular 13：Angular Material 13 自定义主题抛出错误

Question

我的项目有自定义主题托盘，它可以与角度材料的 ^12.2.13 版本正常工作，但不能与 ^13.2.3 一起使用。下面是我的自定义主题的 SCSS：

custome-mat-theme.scss

@import '~@angular/material/theming';
@include mat-core();

$cust-blue: (primary: #002a5c, contrast: (primary: #ffffff));
$cust-gold: (accent: #989100, contrast: (accent: #ffffff));
$primary: mat-palette($cust-blue, primary);
$accent: mat-palette($cust-gold, accent);

$theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

angular.json

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "./node_modules/ngx-toastr/toastr.css",
  "src/styles.css",
  "src/assets/css/custom-mat-theme.scss"
]

Error

./src/assets/css/custom-mat-theme.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[ 6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rul es[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]! ./node_m odules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/assets/css/custom-mat-theme.scss

• 错误：模块构建失败（来自./node_modules/sass-loader/dist/cjs.js）：SassError：'Hue“100”确实 调色板中不存在。可用色调有：原色、对比色' ╷ 55 │ 打火机：_get-color-from-palette($base-palette, $lighter), │
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵< br> node_modules@angular\material\core\theming_theming.scss 55:14
  定义调色板()
  node_modules@angular\material\core\theming_theming-deprecated.scss 16:11 调色板() src\assets\css\custom-mat-theme.scss 6:11
  根样式表

谁能告诉我这有什么问题吗？

Answer 1

似乎材质至少需要色调：100、色调 500 和色调 700（可能用于打火机等功能）。

我和你有同样的问题，我只定义了色调 500。然后我为每种颜色设置了色调 100 和色调 700，它解决了我的问题。就我个人而言，一开始，我对三种色调使用相同的颜色。