Primärfarbe in Stylesheets des Projekts abrufen

Question

Gibt es eine Möglichkeit, die Primärfarbe, die im eckigen Material verwendet wird, in die CSS-Dateien eines eckigen Projekts zu übernehmen?

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

@include mat-core(); 

$primary: mat-palette($mat-green, 800); 
$accent: mat-palette($mat-teal, 600, A100, A400); 
$warn: mat-palette($mat-red, 600); 

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

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

Ich habe versucht, verwenden * .scss Dateien in meine Komponenten, aber die $primary Variable war nicht wiederzuerkennen:

In einem Projekt können wir die Grundfarbe in einer * .scss Datei wie folgt definieren

//*.scss file 
//... 
.myclass { 
    background: $primary; //This line compiles with the error 'Undefined variable: "$primary".' 

} 

Answer 1

Um diese Variable zu verwenden, muss sie zuerst definiert werden. Abhängig davon, wo es definiert und schließlich geändert wurde (Frameworks haben oft eine Art von Einstellungen oder Ähnliches), dann müssen Sie @import diese.

Die Art und Weise, wie scss normalerweise verwendet wird, besteht jedoch darin, dass eine Hauptdatei (name.scss) und mehrere Importdateien (_name.scss) vorhanden sind. Das wird dann in eine einzige CSS-Datei kompiliert. Um diese Regeln zu erweitern, fügen Sie sie am Ende (oder am markierten Punkt) dieser Hauptdatei hinzu. Wenn Sie eine separate "Haupt" -Datei (und daher CSS-Datei) erstellen, haben Sie möglicherweise CSS-Duplikate und selbst wenn nicht, ist es immer noch unpraktisch.

Auch möchten Sie wahrscheinlich mat-color($theme)