Переопределение переменных scss с помощью Angular Material - PullRequest
Новая
       21

Переопределение переменных scss с помощью Angular Material

0 голосов
/ 26 февраля 2019

У меня есть следующий scss-файл, импортируемый в мой Angular Project 

@import '~@angular/material/theming';
@import "./mat-palette.scss";

@include mat-core();

$ombi-app-primary: mat-palette($ombi-primary, 500);
$ombi-app-accent : mat-palette($ombi-accent, A200, A100, A400);

$background: white;

$ombi-app-warn : mat-palette($mat-deep-orange);

$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn);

@include angular-material-theme($ombi-app-theme);

// Define an alternate dark theme.
$ombi-dark-app-primary: mat-palette($mat-grey, 800);
$ombi-dark-app-accent: mat-palette($mat-amber, A200, A100, A400);
$ombi-dark-app-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn);

$primary: mat-color($ombi-app-primary);
$accent: mat-color($ombi-app-accent);
$warn: mat-color($ombi-app-warn);

.dark {
    @include angular-material-theme($dark-theme);
    $panel: mat-color(mat-palette($mat-grey, 800));
    $primary: mat-color($ombi-dark-app-primary);
    $accent: mat-color($ombi-dark-app-accent);
    $warn: mat-color($ombi-dark-app-warn);

    $background:  #424242;
}

Теперь, когда к телу применен класс .dark, я ожидаю, что он применит переменные внутри раздела .dark выше.

Я импортирую этот файл в другие файлы scss, чтобы я мог использовать переменные, например, $background.

Поэтому, когда применяется класс .dark, кажется, что установлен $backgroundна white, а не #424242, и я не могу понять, почему.

Вот пример того, как я его импортирую: 

@import "~styles/Styles.scss";

.details {
    background: $background;
}
...