Angular 2自定义主题，SCSS错误 [英] Angular 2 Custom Theme , SCSS error

问题描述

我是Angular 2的新手，也是SCSS的新手(我一直使用CSS).我正在尝试为我的angular-cli项目设置自定义主题，并将其与我们的品牌颜色一起使用.

I am new to Angular 2, and brand new to SCSS (I have always used css). I am trying to setup a custom theme for my angular-cli project that goes along with our branding colors.

我发现了一个stackoverflow问题( Angular2 Material-真正的自定义主题?)我以为可以用，但是可悲的是我遇到了一个错误，它看起来像是Angular 2解析我的.scss自定义主题文件时遇到的问题.我已经在应用程序根目录中的angular-cli.json中添加了.scss文件的必要内容，并将新的.scss文件与最初由angular-cli项目设置创建的style.css放在src文件夹中.下面是我创建的.scss文件.

I found a stackoverflow question (Angular2 Material - Real custom theming?) that I thought would work, but sadly I am getting a error that looks like a problem with Angular 2 parsing my .scss custom theme file. I have made the necessary addition of my .scss file in the angular-cli.json located in the root of the application, and placed the new .scss file in the src folder alongside the style.css originally created by angular-cli project setup. Below is the .scss file I created.

@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);

在构建和启动我的开发服务器时，出现以下错误stacktrace.

I get the following error stacktrace when building and starting up my dev server.

错误 ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/ae-main-
theme.scss模块构建失败:未定义 ^ map-get($map, $key)的参数$map必须是地图

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/ae-main-
theme.scss Module build failed: undefined ^ Argument $map of map-get($map, $key) must be a 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 @多种样式

Backtrace: node_modules/@angular/material/core/theming/_theming.scss:19, in
function map-get node_modules/@angular/material/core/theming/_theming.scss:19, in function md-palette stdin:76 in C:\Users\jstafford\Desktop\working\ae-
ui\node_modules\@angular\material\core\theming_theming.scss (line 19, column 14) @ ./src/ae-main-theme.scss 4:14-166 @ multi styles

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

ERROR in ./src/ae-main-theme.scss)` must be a map

现在，我知道我在这里定义自定义调色板.我在资料2入门页面上看到的唯一示例使用$ md-red，$ md-indigo和预定义的该颜色的不同色调.谁能帮助我使此工作正常进行，以便我可以像在此处中看到的那样进行真正的自定义. 我想念什么?

Now, I know I am defining a custom palette here. The only examples I have seen on the material 2 getting started page use $md-red, $md-indigo and the different hues of that color that are predefined. Can anyone help me to get this working so I can truly customize like I saw here. What am I missing?

推荐答案

我在靛蓝变量上忘记了$符号(这是导致解析器异常的原因):

I forgot a $ sign on my indigo variable (this is what caused the parser exception):

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

我还添加了对原色和第二色的选择:

I also added my choice of primary and secondary colors:

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

这篇关于Angular 2自定义主题，SCSS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！