Ich habe bereits SCSS-Variablen in src/styles/settings/_variables.scss
Definiert und importiere sie in src/styles.scss
, Aber diese Variablen sind immer noch nicht für jede einzelne Komponente verfügbar.
Gibt es eine Möglichkeit, eine globale Datei zu erstellen, die alle SCSS-Variablen für den Rest meiner Komponenten enthält? Da das Schreiben von @import
In jede einzelne Komponentendatei .scss
Sehr frustrierend ist, insbesondere wenn ich viele verschachtelte Komponenten habe.
Ich weiß, es gibt viele ähnliche Fragen, aber es scheint, dass sie alle veraltet sind und sich nicht auf die neuesten Versionen von Angular beziehen.
Ich benutze Angular 7.3 mit CLI.
Sie müssen nur ein wenig mehr Konfiguration hinzufügen. Wenn Sie also Ihre globalen Variablen deklarieren, müssen Sie diese in :root{}
Einschließen. Also in src/styles/settings/_variables.scss
.
:root
{
--blue: #00b; // or any global you wish to share with components
}
Wenn Sie sie dann im SCSS verwenden, müssen Sie wie folgt darauf zugreifen.
.example-class {
background-color: var(--blue)
}
Um dies in Bezug auf Kommentare zu ergänzen, kann diese Methode mixins
, @media
Und keyframes
verwenden und ist nicht nur auf Farben/Schriftarten beschränkt. Das war ein Beispiel.
Nach meinem Verständnis benötigen Sie eine globale Datei src/assets/style/global
Und importieren dann jede scss-Datei dort, wo Sie sie so definieren.
@import 'filename';
Wenn Sie nicht möchten, dass globale Variablen in einer Komponente verwendet werden, schauen Sie, wenn die globalen Variablen funktionieren. Schauen Sie sich ViewEncapsulation an, da dies verwendet werden kann, um sie zu ignorieren.
So funktioniert ein aktuelles Projekt, in dem ich mich befinde, mit globalen Variablen und es scheint gut zu funktionieren. Dadurch entfällt die Notwendigkeit, die Variablen in jede von Ihnen verwendete scss-Datei zu importieren. Kommentar, wenn Sie Probleme haben, BR.
Gibt es Möglichkeiten, eine globale Datei mit scss-Variablen für alle Komponenten verfügbar zu machen?
Ohne jedes Mal eine globale Datei in jede Komponente zu importieren, möchten Sie, dass diese sass-Variablen verfügbar sind. Dies ist nicht möglich.
So funktioniert es in SASS Wenn Sie Partials verwenden, um Code besser zu organisieren, können Sie die Anweisung @import
Zum Referenzieren anwenden. Wenn es also einige sass-Variablen in shared/_variables.scss
Gibt:
$lightslategray: #778899;
$darkgray: #A9A9A9;
und diese Variablen müssen in einem anderen Stylesheet verwendet werden. Das Stylesheet mit ihnen muss zuerst @ importiert werden:
// Shared
@import "shared/variables";
.content {
background: $lightslategray;
}
In Angular funktioniert es auf ähnliche Weise (bezogen auf externes Stylesheet). Wenn Sie also etwas sass variables, mixins or functions
Benötigen, um von einem bestimmten component.scss
Verwendet zu werden, gibt es Keine andere saubere Möglichkeit, als sie in dieser component.scss
mit der Anweisung @import
zu referenzieren. Um die Aufgabe zu vereinfachen, können Sie eine Datei src/_variables.scss
erstellen und die Syntax wie diese in Ihrer component.scss
:
@import “~variables.scss”;
In angular 8 arbeiten für mich.
In Ihrer Datei _variables.scss müssen Sie Folgendes hinzufügen:
:root{--my-var:#fabada}
Danach gehen Sie in Ihre angle.json und fügen Sie diese in "styles" : hinzu
{"input":"yourPath/_variables.scss"}