как использовать переменные цвета темы углового материала в других файлах scss

Question

для школьного задания нам нужно использовать угловой материал. Я создал собственную тему под названием: weather-theme.scss

код в этом файле выглядит следующим образом:

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

    @include mat-core();

    // Define the palettes for your theme using the Material Design palettes available in palette.scss
    // (imported above). For each palette, you can optionally specify a default, lighter, and darker
    // hue. Available color palettes: https://material.io/design/color/
    $weather-theme-primary: mat-palette($mat-gray, 800, 700, 600);
    $weather-theme-accent:  mat-palette($mat-amber, 800, 700);

    // The warn palette is optional (defaults to red).
    $weather-theme-warn:    mat-palette($mat-red);

    // Create the theme object (a Sass map containing all of the palettes).
    $weather-theme-theme: mat-light-theme($weather-theme-primary, $weather-theme-accent, $weather-theme-warn);

    // Include theme styles for core and each component used in your app.
    // Alternatively, you can import and @include the theme mixins for each component
    // that you are using.
    @include angular-material-theme($weather-theme-theme);

тема работает.

, и я импортирую тему вstyles.scss с кодом:

    @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

    @import './weather-theme.scss';
    //@import './variables.scss';

    html, body {
        font-family: 'Nunito';
    }

    html, body { height: 100%; }
    body { margin: 0;}

Теперь проблема в том, что я хочу использовать переменные Theme в других стилях, как я хочу дать основному цвету тело, из которого код выглядит так:

    body { 
        margin: 0;
        background-color: $weather-theme-primary;
    }

, но когда я импортирую weather-theme.scss, переменные восстанавливаются с помощью scss intellisense, он не работает, и я получаю следующую ошибку:

ОШИБКА в ./src/scss/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/raw-css-loader.js!./node_modules/postcss-loader/src??embedded !. /node_modules/sass-loader/lib/loader.js??ref--15-3!./src/scss/styles.scss) Сбой сборки модуля (из ./node_modules/sass-loader/lib/loader.js):

background-color: $weather-theme-primary;
                 ^
  (50: #fafafa, 100: #f5f5f5, 200: #eeeeee, 300: #e0e0e0, 400: #bdbdbd, 500: #9e9e9e, 600: #757575, 700: #616161, 800: #424242, 900: #212121, A100: #ffffff, A200: #eeeeee, A400: #bdbdbd, A700: #616161, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: rgba(0, 0, 0, 0.87), 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: white), default: #424242, lighter: #616161, darker: #757575, text: #424242, default-contrast: white, lighter-contrast: white, 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": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": rgba(0, 0, 0, 0.87), "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.

╷ 13 │ цвет фона: $ weather-theme-primary;│ ^^^^^^^^^^^^^^^^^^^^^^ d stdin 13:23 корневая таблица стилей в / media / sean-paul / Данные / Проекты / Школа / CSP / OpenWeatherAngularApp / src /scss / styles.scss (строка 13, столбец 23)

что я здесь не так делаю?

примечание: я использую угловой 8

Заранее спасибо!

Answer 1

Ваша переменная является картой. Вы должны указать, какой атрибут вы хотите.

background-color: map-get($weather-theme-primary, 100)

Answer 2

$weather-theme-primary, созданный вами в weather-theme.scss, содержит не одно значение, а целую палитру. Посмотрите название миксина, с которым вы его создали, а также в сообщении об ошибке вы можете увидеть фактический сбрасываемый объект (... 50: #fafafa, 100: #f5f5f5, ..., где 50 - первый ключ, #fafafa - цвет для этого, 100 - это второй ключ, #f5f5f5 - это цвет для этого и т. Д.).

Вы можете извлечь значения из карты следующим образом:

$my-color: map-get($weather-theme-primary, 50)

, а затемцвет может использоваться в настоящих правилах scss.