SassError: $map: null不是一個映射 - Angular自訂主題的問題解決
<p>我為我的Angular專案創建了以下自訂主題:</p>
<pre class="brush:php;toolbar:false;">@use '@angular/material' as mat;
/* 您可以在此文件中新增全域樣式,也可以匯入其他樣式檔 */
@include mat.core();
$f-brand: (
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,
contrast: (
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);</pre>
<p>我還將自訂主題加入了我的general styles.css檔案中,但是當我執行「ng serve」時,出現了以下錯誤:</p>
<pre class="brush:php;toolbar:false;">SassError: $map: null is not a map.
╷
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 theme()
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 theme()
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-themes()
src\styles-f-theme.scss 44:1 root stylesheet</pre>
<p>透過在網路上搜索,我發現「map.get」現在似乎是「map-get」。不幸的是,我不知道如何修復這個問題。 </p>
<p>我專案中使用的Angular版本是“14.0.5”,Angular Material版本是“14.0.4”。 </p>