So verwenden Sie scss in Angular-Projekten

Dieses Mal zeige ich Ihnen, wie Sie scss in Angular-Projekten verwenden und welche Vorsichtsmaßnahmen für die Verwendung von scss in Angular-Projekten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vorwort

SCSS ist eine neue Syntax, die in Sass 3 eingeführt wurde. Ihre Syntax ist vollständig kompatibel mit CSS3 und erbt die leistungsstarken Funktionen von Sass. 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 Referenzen 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 und daran zu denken, auch die Verweise auf die 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:

Verwenden Sie Node+Swig zum Rendern

Verwenden Sie JS, um das Bild zu manipulieren, so dass nur Schwarz übrig bleibt weiß

Das obige ist der detaillierte Inhalt vonSo verwenden Sie scss in Angular-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!