SassError: $map: null은 지도가 아닙니다 - Angular 사용자 정의 테마 문제 해결
<p>저는 Angular 프로젝트에 대해 다음과 같은 맞춤 테마를 만들었습니다. </p>
<pre class="brush:php;toolbar:false;">@'@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);</pre>
<p>또한 일반 styles.css 파일에 맞춤 테마를 추가했지만 "ng Serve"를 실행하면 다음 오류가 발생합니다. </p>
<pre class="brush:php;toolbar:false;">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 루트 스타일시트</pre>
<p> 온라인으로 검색해보니 "map.get"이 이제 "map-get"인 것 같습니다. 안타깝게도 이 문제를 해결하는 방법을 모르겠습니다. </p>
<p>제 프로젝트에 사용된 Angular 버전은 "14.0.5"이고 Angular Material 버전은 "14.0.4"입니다. </p>
