Angular 2自定義主題，SCSS錯誤

我是Angular 2的新手，並且是全新的SCSS（我一直使用css）。我正在嘗試爲我的angular-cli項目設置一個自定義主題，並伴隨我們的品牌顏色。Angular 2自定義主題，SCSS錯誤

我發現了一個我認爲會工作的stackoverflow問題（Angular2 Material - Real custom theming?），但令人遺憾的是，我收到一個錯誤，看起來像Angular 2解析我的.scss自定義主題文件時出現問題。我已經在位於應用程序根目錄下的angular-cli.json中添加了我的.scss文件，並將新的.scss文件放在src文件夾中，旁邊是最初由angular-cli項目設置創建的style.css 。下面是我創建的.scss文件。

@import '[email protected]/material/core/theming/all-theme'; 

@include md-core(); 

$ae-brand-indigo: (
    50: #e0ebf3, 
    100: #b3cee1, 
    200: #80adce, 
    300: #4d8cba, 
    400: #2673ab, 
    500: #005a9c, 
    600: #005294, 
    700: #00488a, 
    800: #003f80, 
    A200: #6a9bff, 
    A400: #3778ff, 
    A700: #1e67ff, 
    contrast: (
     50: $black-87-opacity, 
     100: $black-87-opacity, 
     200: $black-87-opacity, 
     300: $black-87-opacity, 
     500: white, 
     600: white, 
     700: white, 
     800: white, 
     900: white, 
     A100: $black-87-opacity, 
     A200: $black-87-opacity, 
     A400: $black-87-opacity, 
     A700: white, 
    ) 
); 

$ae-brand-orange: (
    50: #fef3e4, 
    100: #fde0bb, 
    200: #fccc8e, 
    300: #fab861, 
    400: #f9a83f, 
    500: #f8991d, 
    600: #f7911a, 
    700: #f68615, 
    800: #f57c11, 
    900: #f36b0a, 
    A100: #ffffff, 
    A200: #fff1e9, 
    A400: #ffd1b6, 
    A700: #ffc19c, 
    contrast: (
     50: $black-87-opacity, 
     100: $black-87-opacity, 
     200: $black-87-opacity, 
     300: $black-87-opacity, 
     400: $black-87-opacity, 
     500: white, 
     600: white, 
     700: white, 
     800: white, 
     900: white, 
     A100: $black-87-opacity, 
     A200: $black-87-opacity, 
     A400: $black-87-opacity, 
     A700: white, 
    ) 
); 

// mandatory stuff for theming 
$ae-primary: md-palette(ae-brand-indigo); 
$ae-accent: md-palette($ae-brand-orange); 
$ae-warn: md-palette($md-red); 

// include the custom theme components into a theme object 
$ae-main-theme: md-light-theme($ae-primary, $ae-accent, $ae-warn); 

// include the custom theme object into the angular material theme 
@include angular-material-theme($ae-main-theme);

當構建並啓動我的開發服務器時，出現以下錯誤stacktrace。

ERROR在 ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/ae-main-
theme.scss模塊構建失敗：未定義 ^論證map-get($map, $key)$map必須是一個地圖

回溯： node_modules/@angular/material/core/theming/_theming.scss：19，在
功能map-get node_modules/@角/材料/型芯/主題/ _theming.scss：19，在功能md-palette 標準輸入：76 在C：\用戶\ jstafford \桌面\工作\ AE-
UI \ node_modules \ @angular \材料\芯\ theming_theming.scss（線19，柱14） @ ./src/ AE-主theme.scss 4：14-166 @多款式

ERROR在./src/ae-main-theme.scss）`必須是一個地圖

現在，我知道我我在這裏定義一個自定義調色板。我在材質2入門頁面上看到的唯一示例使用$ md-red，$ md-indigo以及預定義的顏色的不同色調。任何人都可以幫助我得到這個工作，所以我可以真正定製，就像我看到here。 我錯過了什麼？

來源

2017-01-18 John Stafford

是新到scss，我留下了導入'變量'，因爲我認爲這是在我引用的stackoverflow問題中最初提出這個問題的人的scss設置獨特的東西。不知道這是否與我的問題有關。 –

我忘了$登錄我的靛藍變量（這是什麼原因造成的解析器除外）：

$ae-primary-palette: md-palette($ae-brand-indigo); 
/* -----------------------------^ */

我還添加了我選擇的小學和中學的顏色：

$primary-color: map-get($ae-primary-palette, 500); 
$secondary-color: map-get($ae-accent-palette, 500);

來源

2017-01-19 18:25:04

Angular 2自定義主題，SCSS錯誤

回答

相關問題