Angular 4 - 材质主题定制

Question

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

错误 ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/theme.scss 模块构建失败：未定义 ^ map-get($map, $key) 的参数 $map 必须是地图

回溯： node_modules/@angular/material/_theming.scss:1166，在函数map-get node_modules/@angular/material/_theming.scss:1166，在函数mat-color node_modules/@angular/material/_theming.scss:1325，在 mixin mat-option-theme node_modules/@angular/material/_theming.scss:3739，在 mixin mat-core-theme node_modules/@angular/material/_theming.scss:3808，在 mixin angular-material-theme 标准输入：12 在 E:\PC_SHOP\pcShop-Final\PcShop-Final\node_modules\@angular\material_theming.scss （第 1166 行，第 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);