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

Question

我为我的项目定制了主题托盘，它可以与^12.2.13Angular 材质版本配合使用，但不能与^13.2.3. 以下是我的自定义主题 SCSS：

\n

客户垫主题.scss

\n

@import '~@angular/material/theming';\n@include mat-core();\n\n$cust-blue: (primary: #002a5c, contrast: (primary: #ffffff));\n$cust-gold: (accent: #989100, contrast: (accent: #ffffff));\n$primary: mat-palette($cust-blue, primary);\n$accent: mat-palette($cust-gold, accent);\n\n$theme: mat-light-theme($primary, $accent);\n\n@include angular-material-theme($theme);\n

\n

角度.json

\n

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

\n

错误

\n

\n

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

\n

\n
• 错误：模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）：SassError：'色调“100”在调色板中不存在。可用色调有：原色、对比度' \xe2\x95\xb7 55 \xe2\x94\x82\nlighter: _get-color-from-palette($base-palette, $lighter), \xe2\x94\x82 \n
  ^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\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 调色板( ) src\\assets\\css\\custom-mat-theme.scss 6:11
  \n根样式表
\n

\n

\n

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

\n

Answer 1

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

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