Detaillierte Erläuterung der Schritte zur Verwendung von scss im Angular-Projekt

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von scss in Angular-Projekten ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von scss in Angular-Projekten?

Vorwort

SCSS ist eine neue Syntax, die von Sass 3 eingeführt wurde. Ihre Syntax ist vollständig kompatibel mit CSS3 und erbtSass leistungsstarke Funktionen. Das heißt, jedes Standard-CSS3-Stylesheet ist eine gültige SCSS-Datei mit derselben Semantik. Darüber hinaus kann SCSS auch die meisten CSS-Hacks (einige CSS-Tricks) und browserspezifische Syntax erkennen, beispielsweise die alte IE-Filtersyntax.

Da SCSS eine Erweiterung von CSS ist, funktioniert jeder Code, der in CSS ordnungsgemäß funktioniert, auch in SCSS ordnungsgemäß. Mit anderen Worten: Ein Sass-Benutzer muss nur verstehen, wie Sass-Erweiterungen funktionieren, um SCSS vollständig zu verstehen. Die meisten Erweiterungen wie Variablen, übergeordnete Verweise und Direktiven sind identisch; der einzige Unterschied besteht darin, dass SCSS Semikolons und geschweifte Klammern anstelle von Zeilenumbrüchen und Einrückungen erfordert.

Angular CLI unterstützt eine Vielzahl von CSS-Vorverarbeitungen, darunter:

• CSS

• SCSS

• weniger

• Sass

• Styl (Eingabestift)

Der Standardwert ist CSS.

Angular bietet zwei Möglichkeiten, die CSS-Vorverarbeitung anzugeben. Nehmen Sie unten scss als Beispiel:

CSS-Vorverarbeitung für neue Projekte angeben

Verwenden Sie in neuen Angular-Projekten --style, um die CSS-Vorverarbeitung anzugeben

ng new my-project --style=scss

Bestehende Projekte spezifizieren die CSS-Vorverarbeitung

Für bestehende Projekte unterstützt es auch die Änderung der CSS-Vorverarbeitung.

View .angular-cli.json, es gibt eine Anweisung ähnlich der folgenden im Standardkonfigurationselement:

"defaults": {
 "styleExt": "css",
 "component": {}
}

Verwenden Sie den Set-Befehl, um styleExt zu ändern

ng set defaults.styleExt scss

If Das Projekt verwendet scss einheitlich. Es wird empfohlen, die CSS-Datei im Projekt in scss zu ändern. Denken Sie daran, auch die Referenz der CSS-Datei in anderen Dateien zu ändern. Der Verweis auf „styles.css“ befindet sich in „.angular-cli.json“.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So lösen Sie das 302-Statuscode-Problem in Axios

So verwenden und deaktivieren Sie den Vue Komponente auswählen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von scss im Angular-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!