Question

我是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的参数map-get($map, $key)必须是地图

回溯：       node_modules/@angular/material/core/theming/_theming.scss:19,in
      函数map-get       node_modules/@angular/material/core/theming/_theming.scss:19,in       函数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那样真正定制。 我缺少什么？

Answer 1

我忘记了我的indigo变量上的"ajax": { url: 'lists/data', data: function ( d ) { d.mail = mailingListName; } } }符号（这是导致解析器异常的原因）：

我还添加了我选择的主要和次要颜色：

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

Angular 2自定义主题，SCSS错误

1 个答案: