Невозможно получить переменную из материальной темы в Angular 7

Question

У меня Angular 7.0.3, и я пытаюсь получить переменную create 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) <- второе значение - оттенок, проверьте палитру типа $ mat-indigo в @ angular / material / _theming.scss для возможных значений </p>

Также: вы вызываете mat-core () в _variable.scss. Что заставляет меня думать, что вы, вероятно, вызываете mat-core () более одного раза. Не делай этого! Оформить заказ https://material.angular.io/guide/theming