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: #97ffec,
  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,
  )
);

$기본: mat.define-palette($f-브랜드);

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

@include mat.all-comComponent-themes($theme);

또한 일반 styles.css 파일에 맞춤 테마를 추가했지만 "ng Serve"를 실행하면 다음 오류가 발생합니다.

SassError: $map: null은 지도가 아닙니다.
  ╷
9 │ $foreground-base: map.get($foreground, base);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules@angularmaterialcoreripple_ripple-theme.scss 9:21 color()
  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 테마()
  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 테마()
  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 모든 구성 요소 테마()
  srcstyles-f-theme.scss 44:1 루트 스타일시트

온라인으로 검색해보니 "map.get"이 이제 "map-get"인 것 같습니다. 안타깝게도 이 문제를 해결하는 방법을 모르겠습니다.

제 프로젝트에 사용된 Angular 버전은 "14.0.5"이고 Angular Material 버전은 "14.0.4"입니다.

Answer 1

테마를 구축하려면 기본 색상과 강조 색상이라는 두 가지 색상 팔레트가 필요하기 때문에 이 오류가 발생합니다.

새 색상 팔레트를 추가하거나 기본 색상을 강조 색상으로 지정하세요.

으아악