webentwicklung-frage-antwort-db.com.de

Globale scss-Variablen für Angular Komponenten, ohne sie jedes Mal zu importieren

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.

19

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.

9
Dince12

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”;
4
Vadi

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"}
0
lauren