從14更新到angular V15報錯

Question

此錯誤似乎與樣式和自定義主題有關，但根據文檔，一切似乎都是正確的。 我試過刪除@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.

@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.

Answer 1

經過長時間的研究和大量的嘗試和錯誤，我才發現我的錯誤是沒有在調色板線的定義上搭建色調。

只需添加： $warn: mat.define-palette($red-palette, 500);