angular - undefined ... 不是有效的 CSS 值

Question

错误、功能请求或提议:

我为 Material 设计创建了一个主题，但是当我构建时出现错误。我的代码是这样的:
main.scss

@import "~@angular/material/theming";

// Theme variables, must be included before the libraries to allow overriding defaults
@import "theme/theme-variables";

// Theme customization
// -------------------
@import "theme/theme";

theme-variables.scss

// Theme contrast color
$dark: $black-87-opacity;
$light: $white-87-opacity;
$strong-light: rgb(255, 255, 255);

// Theme color map
$theme-blue: (
  50: #ebf1fa,
  100: #c2d4ef,
  200: #9ab8e5,
  300: #78a0dc,
  400: #5688d3,
  500: #3470ca,
  600: #2e62b1,
  700: #275498,
  800: #21467e,
  900: #1a3865,
  A100: #c2d4ef,
  A200: #9ab8e5,
  A400: #5688d3,
  A700: #275498,
  contrast: (
    50: $dark,
    100: $dark,
    200: $dark,
    300: $strong-light,
    400: $strong-light,
    500: $light, // default
    600: $light, // default
    700: $light, // default
    800: $light, // default
    900: $light, // default
    A100: $dark,
    A200: $light, // default
    A400: $light, // default
    A700: $light // default
));

$theme-paleblue: (
  50: #ececee,
  100: #c5c6cb,
  200: #9ea1a9,
  300: #7d818c,
  400: #5c616f,
  500: #3c4252,
  600: #353a48,
  700: #2d323e,
  800: #262933,
  900: #1e2129,
  A100: #c5c6cb,
  A200: #9ea1a9,
  A400: #5c616f,
  A700: #2d323e,
  contrast: (
    50: $dark,
    100: $dark,
    200: $dark,
    300: $strong-light,
    400: $strong-light,
    500: $light, // default
    600: $light, // default
    700: $light, // default
    800: $light, // default
    900: $light, // default
    A100: $dark,
    A200: $light, // default
    A400: $light, // default
    A700: $light // default
));

// ------------------------------------------------------------------------------------------------
// Custom Material theme variables
// ------------------------------------------------------------------------------------------------
@include mat-core();


// ------------------------------------------------------------------------------------------------
// Default Theme
// ------------------------------------------------------------------------------------------------

// Background palettes
$mat-light-theme-background: (
  status-bar: map_get($mat-grey, A100),
  app-bar:    map_get($mat-grey, A100),
  background: map_get($mat-grey, 100),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: $black-12-opacity,
  raised-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, A100),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
);

// Define default color palettes
$default-primary: mat-palette($theme-paleblue, 700, 500, 600);
$default-accent: mat-palette($mat-light-blue, 600, 400, 700);
$default-warn: mat-palette($mat-red);

// Create default theme object
$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);

theme.scss

@include angular-material-theme($default-theme);
@include splash-theme($default-theme);

目前的行为是什么？

我收到此错误:

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss
Module build failed:
undefined
            ^
      (50: #ececee, 100: #c5c6cb, 200: #9ea1a9, 300: #7d818c, 400: #5c616f, 500: #3c4252, 600: #353a48, 700: #2d323e, 800: #262933, 900: #1e2129, A100: #c5c6cb, A200: #9ea1a9, A400: #5c616f, A700: #2d323e, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: white, 400: white, 500: rgba(255, 255, 255, 0.87), 600: rgba(255, 255, 255, 0.87), 700: rgba(255, 255, 255, 0.87), 800: rgba(255, 255, 255, 0.87), 900: rgba(255, 255, 255, 0.87), A100: rgba(0, 0, 0, 0.87), A200: rgba(255, 255, 255, 0.87), A400: rgba(255, 255, 255, 0.87), A700: rgba(255, 255, 255, 0.87)), default: #2d323e, lighter: #3c4252, darker: #353a48, default-contrast: rgba(255, 255, 255, 0.87), lighter-contrast: rgba(255, 255, 255, 0.87), darker-contrast: rgba(255, 255, 255, 0.87), "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": white, "400-contrast": white, "500-contrast": rgba(255, 255, 255, 0.87), "600-contrast": rgba(255, 255, 255, 0.87), "700-contrast": rgba(255, 255, 255, 0.87), "800-contrast": rgba(255, 255, 255, 0.87), "900-contrast": rgba(255, 255, 255, 0.87), "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(255, 255, 255, 0.87), "A400-contrast": rgba(255, 255, 255, 0.87), "A700-contrast": rgba(255, 255, 255, 0.87), "contrast-contrast": null) isn't a valid CSS value.
      in C:\Devlab\node-apps\angular-x-express-starter-kit\node_modules\@angular\material\_theming.scss (line 1072, column 14)
 @ ./src/main.scss 4:14-187
 @ multi ./src/main.scss

这是我的环境: node-sass -v结果是 4.5.2

   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.3
node: 6.10.3
os: win32 x64
@angular/animations: 4.1.2
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/material: 2.0.0-beta.5
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

还有其他什么我们需要知道的么？

Answer 1

theme-variables.scss 使用了 Angular Material:mat-palette、mat-light-theme 等。
为了使这些可用，您需要将此导入添加到 theme-variables.scss 的顶部:

@import "~@angular/material/theming";