这个错误似乎与样式和自定义主题有关，但根据文档，一切似乎都是正确的。我试过删除@include mat.all-component-themes($theme);，但这只给我简单的html没有样式或任何东西。
我的主题配置:
@use '@angular/material' as mat;
@import "ag-grid-community/dist/styles/ag-grid.css";
@import "ag-grid-community/dist/styles/ag-theme-alpine.css";
@include mat.all-component-typographies();
@include mat.core();
/* Main Colors */
$primary-palette: (
50 : #e0f1e8,
100 : #b3dcc5,
200 : #80c49e,
300 : #4dac77,
400 : #269b5a,
500 : #00893d,
600 : #008137,
700 : #00762f,
800 : #006c27,
900 : #00591a,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
)
);
$white-palette:(
50 : #ffffff,
100 : #ffffff,
200 : #ffffff,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
)
);
$red-palette: (
50 : #fce6e5,
100 : #f8c0be,
200 : #f39693,
300 : #ee6b68,
400 : #ea4c47,
500 : #e62c27,
600 : #e32723,
700 : #df211d,
800 : #db1b17,
900 : #d5100e,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
)
);
$primary: mat.define-palette($white-palette, 500);
$accent: mat.define-palette($primary-palette, 500);
$warn: mat.define-palette($red-palette);
$theme: mat.define-light-theme((
color: (
primary: $palette,
accent: $accent,
warn: $warn,
),
density: 0,
));
@include mat.core-theme($theme);
@include mat.all-component-themes($theme);
以下错误:
Build at: 2022-11-28T19:27:52.524Z - Hash: ab0879c40f711d98 - Time: 20530ms
./src/custom-theme.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
is not a color. Falling back to "dark" tone.
@materialtheme_theme-color.scss 67:5 tone()
@materialtheme_theme-color.scss 86:14 contrast-tone()
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 26:3 color()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 53:7 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 47:3 theme()
node_modules@angularmaterialcoretheming_all-theme.scss 47:5 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcoretheming_all-theme.scss 44:3 all-component-themes()
srccustom-theme.scss 126:3 root stylesheet
./src/custom-theme.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
is not a color. Falling back to "dark" tone.
@materialtheme_theme-color.scss 67:5 tone()
@materialtheme_theme-color.scss 86:14 contrast-tone()
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules@angularmaterialcard_card-theme.scss 16:3 color()
node_modules@angularmaterialcard_card-theme.scss 70:7 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcard_card-theme.scss 64:3 theme()
node_modules@angularmaterialcoretheming_all-theme.scss 46:5 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcoretheming_all-theme.scss 44:3 all-component-themes()
srccustom-theme.scss 126:3 root stylesheet
./src/custom-theme.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
is not a color. Falling back to "dark" tone.
@materialtheme_theme-color.scss 67:5 tone()
@materialtheme_theme-color.scss 86:14 contrast-tone()
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules@angularmaterialcoreoption_optgroup-theme.scss 10:3 color()
node_modules@angularmaterialcore_core-theme.scss 16:3 color()
node_modules@angularmaterialcore_core-theme.scss 83:7 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcore_core-theme.scss 77:3 theme()
node_modules@angularmaterialcoretheming_all-theme.scss 45:5 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcoretheming_all-theme.scss 44:3 all-component-themes()
srccustom-theme.scss 126:3 root stylesheet
./src/custom-theme.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
is not a color. Falling back to "dark" tone.
@materialtheme_theme-color.scss 67:5 tone()
@materialtheme_theme-color.scss 86:14 contrast-tone()
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules@angularmaterialcoreoption_optgroup-theme.scss 10:3 color()
node_modules@angularmaterialcore_core-theme.scss 16:3 color()
node_modules@angularmaterialcore_core-theme.scss 83:7 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcore_core-theme.scss 77:3 theme()
srccustom-theme.scss 120:1 root stylesheet
./src/custom-theme.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
is not a color. Falling back to "dark" tone.
@materialtheme_theme-color.scss 67:5 tone()
@materialtheme_theme-color.scss 86:14 contrast-tone()
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules@angularmaterialcoreoption_option-theme.scss 14:3 color()
node_modules@angularmaterialcore_core-theme.scss 15:3 color()
node_modules@angularmaterialcore_core-theme.scss 83:7 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcore_core-theme.scss 77:3 theme()
node_modules@angularmaterialcoretheming_all-theme.scss 45:5 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcoretheming_all-theme.scss 44:3 all-component-themes()
srccustom-theme.scss 126:3 root stylesheet
./src/custom-theme.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
is not a color. Falling back to "dark" tone.
@materialtheme_theme-color.scss 67:5 tone()
@materialtheme_theme-color.scss 86:14 contrast-tone()
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules@angularmaterialcoreoption_option-theme.scss 14:3 color()
node_modules@angularmaterialcore_core-theme.scss 15:3 color()
node_modules@angularmaterialcore_core-theme.scss 83:7 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcore_core-theme.scss 77:3 theme()
srccustom-theme.scss 120:1 root stylesheet
./src/custom-theme.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation $weight: Passing a number without unit % (60) is deprecated.
To preserve current behavior: $weight * 1%
More info: https://sass-lang.com/d/function-units
@materialslider_slider-theme.scss 77:5 @use
node_modules@angularmaterialslider_slider-theme.scss 3:1 @use
node_modules@angularmaterialcoredensityprivate_all-density.scss 25:1 @forward
@angular_index.scss 18:1 @use
srccustom-theme.scss 10:1 root stylesheet
./src/custom-theme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
16 │ track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 16:18 -palette-styles()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 28:7 @content
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 176:5 @content
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 216:3 disable-mdc-fallback-declarations()
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 175:3 using-mdc-theme()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 26:3 color()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 53:7 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 47:3 theme()
node_modules@angularmaterialcoretheming_all-theme.scss 47:5 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcoretheming_all-theme.scss 44:3 all-component-themes()
srccustom-theme.scss 126:3 root stylesheet
./src/custom-theme.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
16 │ track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 16:18 -palette-styles()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 28:7 @content
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 176:5 @content
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 216:3 disable-mdc-fallback-declarations()
node_modules@angularmaterialcoremdc-helpers_mdc-helpers.scss 175:3 using-mdc-theme()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 26:3 color()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 53:7 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialprogress-bar_progress-bar-theme.scss 47:3 theme()
node_modules@angularmaterialcoretheming_all-theme.scss 47:5 @content
node_modules@angularmaterialcoretheming_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules@angularmaterialcoretheming_all-theme.scss 44:3 all-component-themes()
srccustom-theme.scss 126:3 root stylesheet
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile.
经过长时间的研究和大量的尝试和错误，我才发现我的错误是没有在调色板线条的定义上脚手架的色调。
必须加上:$warn: mat.define-palette($red-palette, 500);