SassError: $map: null はマップではありません - Angular カスタム テーマの問題解決

Question

Angular プロジェクト用に次のカスタム テーマを作成しました:

@'@angular/material' をマットとして使用します。
/* このファイルにグローバル スタイルを追加したり、他のスタイル ファイルをインポートしたりできます */


@include mat.core();

$f ブランド: (
  50 : #e0f2f1、
  100 : #b3e0db、
  200 : #80cbc4、
  300 : #4db6ac、
  400 : #26a69a、
  500 : #009688、
  600 : #008e80、
  700 : #008375、
  800 : #00796b、
  900 : #006858、
  A100: #97効果、
  A200: #64ffe3、
  A400: #31ffda、
  A700: #18ffd5、
  対比： （
    50 : #000000、
    100 : #000000、
    200 : #000000、
    300 : #000000、
    400: #ffffff、
    500 : #ffffff、
    600 : #ffffff、
    700 : #ffffff、
    800 : #ffffff、
    900 : #ffffff、
    A100: #000000、
    A200: #000000、
    A400: #000000、
    A700: #000000、
  ）
);

$primary: mat.define-palette($f-brand);

$theme: mat.define-light-theme($primary);

@include mat.all-component-主題($theme);

一般のstyles.cssファイルにもカスタムテーマを追加しましたが、「ngserve」を実行すると次のエラーが発生します:

SassError: $map: null はマップではありません。
  ╷
9 │ $foreground-base:map.get($foreground,base);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@angular\material\core\ripple\_ripple-theme.scss 9:21 color()
  node_modules\@angular\material\core\ripple\_ripple-theme.scss 30:7 @content
  node_modules\@angular\material\core\theming\_theming.scss 376:3 private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\ripple\_ripple-theme.scss 27:3 テーマ()
  node_modules\@angular\material\core\_core-theme.scss 48:5 @content
  node_modules\@angular\material\core\theming\_theming.scss 376:3 private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\_core-theme.scss 47:3 テーマ()
  node_modules\@angular\material\core\theming\_all-theme.scss 43:5 @content
  node_modules\@angular\material\core\theming\_theming.scss 376:3 private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\theming\_all-theme.scss 42:3 all-component-主題()
  src\styles-f-theme.scss 44:1 ルート スタイルシート

ネットで調べてみると、「map.get」は「map-get」になっているようです。残念ながら、これを修正する方法がわかりません。

プロジェクトで使用している Angular のバージョンは「14.0.5」、Angular マテリアルのバージョンは「14.0.4」です。

Answer 1

このエラーが発生する理由は、テーマの構築にはメインカラーとアクセントカラーという 2 つのカラーパレットが必要であるためです。

新しいカラーパレットを追加するか、メインカラーをアクセントカラーにします:

リーリー