Angular 2自定义主题，SCSS错误答案

【问题标题】：Angular 2 Custom Theme , SCSS errorAngular 2自定义主题，SCSS错误
【发布时间】：2017-06-03 10:14:18
【问题描述】：

我是 Angular 2 的新手，也是 SCSS 的新手（我一直使用 css）。我正在尝试为我的 angular-cli 项目设置一个自定义主题，以配合我们的品牌颜色。

我发现了一个我认为可行的 stackoverflow 问题 (Angular2 Material - Real custom theming?)，但遗憾的是，我收到了一个错误，看起来像是 Angular 2 解析我的 .scss 自定义主题文件时出现的问题。我已经在位于应用程序根目录的 angular-cli.json 中添加了我的 .scss 文件，并将新的 .scss 文件放在 src 文件夹中，与 angular-cli 项目设置最初创建的 style.css 并排放置.下面是我创建的 .scss 文件。

@import '~@angular/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);

在构建和启动我的开发服务器时，我收到以下错误堆栈跟踪。

错误 ./~/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/@angular/material/core/theming/_theming.scss:19，在功能md-palette 标准输入：76 在 C:\Users\jstafford\Desktop\working\ae-
ui\node_modules\@angular\material\core\theming_theming.scss（第 19 行，第 14 栏） @ ./src/ae-main-theme.scss 4:14-166 @多样式

./src/ae-main-theme.scss) 中的错误必须是地图

现在，我知道我在这里定义了一个自定义调色板。我在材料 2 入门页面上看到的唯一示例使用 $md-red、$md-indigo 和预定义的该颜色的不同色调。谁能帮我完成这项工作，这样我就可以像我看到的here 那样真正自定义。 我错过了什么？

【问题讨论】：

作为 scss 的新手，我将导入“变量”排除在外，因为我认为这是最初在我引用的 stackoverflow 问题中提出此问题的人的 scss 设置所独有的东西。不确定这是否与我的问题有关。

标签： angular sass angular-material

【解决方案1】：

我的 indigo 变量上忘记了 $ 符号（这是导致解析器异常的原因）：

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

我还添加了我选择的原色和二次色：

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

【讨论】：