This error seems to be attached to the styling and custom theming, but everything seems to be correct according to documentations.
I have tried removing @include mat.all-component-themes($theme); but this only gives me plain html without styling or anything.
My theme config:
@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);
The following errors:
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.
@material\theme\_theme-color.scss 67:5 tone()
@material\theme\_theme-color.scss 86:14 contrast-tone()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 26:3 color()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 53:7 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 47:3 theme()
node_modules\@angular\material\core\theming\_all-theme.scss 47:5 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3 all-component-themes()
src\custom-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.
@material\theme\_theme-color.scss 67:5 tone()
@material\theme\_theme-color.scss 86:14 contrast-tone()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules\@angular\material\card\_card-theme.scss 16:3 color()
node_modules\@angular\material\card\_card-theme.scss 70:7 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\card\_card-theme.scss 64:3 theme()
node_modules\@angular\material\core\theming\_all-theme.scss 46:5 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3 all-component-themes()
src\custom-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.
@material\theme\_theme-color.scss 67:5 tone()
@material\theme\_theme-color.scss 86:14 contrast-tone()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules\@angular\material\core\option\_optgroup-theme.scss 10:3 color()
node_modules\@angular\material\core\_core-theme.scss 16:3 color()
node_modules\@angular\material\core\_core-theme.scss 83:7 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\_core-theme.scss 77:3 theme()
node_modules\@angular\material\core\theming\_all-theme.scss 45:5 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3 all-component-themes()
src\custom-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.
@material\theme\_theme-color.scss 67:5 tone()
@material\theme\_theme-color.scss 86:14 contrast-tone()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules\@angular\material\core\option\_optgroup-theme.scss 10:3 color()
node_modules\@angular\material\core\_core-theme.scss 16:3 color()
node_modules\@angular\material\core\_core-theme.scss 83:7 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\_core-theme.scss 77:3 theme()
src\custom-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.
@material\theme\_theme-color.scss 67:5 tone()
@material\theme\_theme-color.scss 86:14 contrast-tone()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules\@angular\material\core\option\_option-theme.scss 14:3 color()
node_modules\@angular\material\core\_core-theme.scss 15:3 color()
node_modules\@angular\material\core\_core-theme.scss 83:7 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\_core-theme.scss 77:3 theme()
node_modules\@angular\material\core\theming\_all-theme.scss 45:5 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3 all-component-themes()
src\custom-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.
@material\theme\_theme-color.scss 67:5 tone()
@material\theme\_theme-color.scss 86:14 contrast-tone()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 123:10 using-mdc-theme()
node_modules\@angular\material\core\option\_option-theme.scss 14:3 color()
node_modules\@angular\material\core\_core-theme.scss 15:3 color()
node_modules\@angular\material\core\_core-theme.scss 83:7 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\_core-theme.scss 77:3 theme()
src\custom-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
@material\slider\_slider-theme.scss 77:5 @use
node_modules\@angular\material\slider\_slider-theme.scss 3:1 @use
node_modules\@angular\material\core\density\private\_all-density.scss 25:1 @forward
@angular\_index.scss 18:1 @use
src\custom-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\@angular\material\progress-bar\_progress-bar-theme.scss 16:18 -palette-styles()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 28:7 @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 176:5 @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 216:3 disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 175:3 using-mdc-theme()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 26:3 color()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 53:7 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 47:3 theme()
node_modules\@angular\material\core\theming\_all-theme.scss 47:5 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3 all-component-themes()
src\custom-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\@angular\material\progress-bar\_progress-bar-theme.scss 16:18 -palette-styles()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 28:7 @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 176:5 @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 216:3 disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 175:3 using-mdc-theme()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 26:3 color()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 53:7 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 47:3 theme()
node_modules\@angular\material\core\theming\_all-theme.scss 47:5 @content
node_modules\@angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3 all-component-themes()
src\custom-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.
