SassError: $map: null bukan peta - Penyelesaian masalah tema tersuai sudut

Question

Saya mencipta tema tersuai berikut untuk projek Angular saya:

@gunakan '@angular/material' sebagai tikar;
/* Anda boleh menambah gaya global dalam fail ini atau mengimport fail gaya lain */


@include mat.core();

jenama $f: (
  50 : #e0f2f1,
  100 : #b3e0db,
  200 : #80cbc4,
  300 : #4db6ac,
  400 : #26a69a,
  500 : #009688,
  600 : #008e80,
  700 : #008375,
  800 : #00796b,
  900 : #006858,
  A100: #97ffec,
  A200: #64ffe3,
  A400: #31ffda,
  A700: #18ffd5,
  kontras: (
    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-themes($theme);

Saya turut menambahkan tema tersuai pada fail styles.css am saya, tetapi apabila saya menjalankan "ng serve" saya mendapat ralat berikut:

SassError: $map: null bukan peta.
  ╷
9 │ $foreground-base: map.get($foreground, base);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules@angularmaterialcoreripple_ripple-theme.scss 9:21 warna()
  node_modules@angularmaterialcoreripple_ripple-theme.scss 30:7 @content
  node_modules@angularmaterialcoretheming_theming.scss 376:3 private-check-duplicate-theme-styles()
  node_modules@angularmaterialcoreripple_ripple-theme.scss 27:3 theme()
  node_modules@angularmaterialcore_core-theme.scss 48:5 @content
  node_modules@angularmaterialcoretheming_theming.scss 376:3 private-check-duplicate-theme-styles()
  node_modules@angularmaterialcore_core-theme.scss 47:3 theme()
  node_modules@angularmaterialcoretheming_all-theme.scss 43:5 @content
  node_modules@angularmaterialcoretheming_theming.scss 376:3 private-check-duplicate-theme-styles()
  node_modules@angularmaterialcoretheming_all-theme.scss 42:3 all-component-themes()
  srcstyles-f-theme.scss 44:1 helaian gaya akar

Dengan mencari dalam talian, saya mendapati bahawa "map.get" kini kelihatan seperti "map-get". Malangnya, saya tidak tahu bagaimana untuk membetulkannya.

Versi Angular yang digunakan dalam projek saya ialah "14.0.5" dan versi Bahan Sudut ialah "14.0.4".

Answer 1

Anda mendapat ralat ini kerana membina tema memerlukan dua palet warna: warna utama dan warna aksen.

Tambah palet warna baharu atau jadikan warna utama anda sebagai warna aksen:

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