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 文件放置在 src 文件夹中,与最初由 angular-cli 项目设置创建的 style.css 一起放置.下面是我创建的 .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);
我在构建和启动我的开发服务器时收到以下错误堆栈跟踪.
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
ofmap-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?
推荐答案
我忘记了 indigo 变量上的 $
符号(这就是导致解析器异常的原因):
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屋!