css - Angular 4 - Material 主题定制

Question

我正在尝试在 Angular Material 中设置我的自定义主题。我的问题是当我想导入 mixin angular-material-theme 时，出现了这个错误:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/theme.scss Module build failed: undefined ^ Argument $map of map-get($map, $key) must be a map

Backtrace: node_modules/@angular/material/_theming.scss:1166, in function map-get node_modules/@angular/material/_theming.scss:1166, in function mat-color node_modules/@angular/material/_theming.scss:1325, in mixin mat-option-theme node_modules/@angular/material/_theming.scss:3739, in mixin mat-core-theme node_modules/@angular/material/_theming.scss:3808, in mixin angular-material-theme stdin:12 in E:\PC_SHOP\pcShop-Final\PcShop-Final\node_modules\@angular\material_theming.scss (line 1166, column 11)

我的 sass 代码:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~@angular/material/_theming.scss';

@include mat-core();

$primary: mat-pallete($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);

$app-theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($app-theme);

Answer 1

这只是一个打字错误，这就是为什么它没有映射到一种颜色而你会得到那个错误(你有 pallete 而不是 palette)。应该是:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~@angular/material/_theming.scss';

@include mat-core();

$primary: mat-palette($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);

$app-theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($app-theme);