用Angular Material覆盖scss变量

Question

我将以下scss文件导入到我的Angular项目中

@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;
}