无法从Angular 7中的材料主题获取变量

Question

我有Angular 7.0.3，我正在尝试用我的材料主题的原色创建scss变量

// src/styles/_variables.scss
@import "~@angular/material/theming";
@include mat-core();
$app-primary: mat-palette($mat-indigo);

但是得到这个错误

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
            ^
      (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, A100: #8c9eff, A200: #536dfe, A400: #3d5afe, A700: #304ffe, 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: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #3f51b5, lighter: #c5cae9, darker: #303f9f, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "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": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null)
 isn't a valid CSS value.
      in C:\code\front\angular\speakup\node_modules\@angular\material\_theming.scss (line 1268, column 14)

我如何解决此问题，或者我需要向您提供有关我的设置的哪些其他信息？

Answer 1

您是否在某处使用变量$app-primary作为CSS颜色值(例如color: $app-primary)？

在这种情况下，您需要使用map_get()来提取实际颜色值：

例如，color: map_get($app-primary, 900) <-第二个值是色调，请在@angular/material/_theming.scss中的$mat-indigo调色板中查看可能的值

另外:您将在_variable.scss中调用mat-core()。这使我认为您可能会不止一次调用mat-core()。别干那事!检出https://material.angular.io/guide/theming