Ausführliche Erklärung zur Unterstützung von SCSS in Angular

SCSS ist eine neue Syntax, die von 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 ordnungsgemäß in SCSS. 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 Anweisungen sind konsistent. Der einzige Unterschied besteht darin, dass SCSS aus Gründen der Modularisierung die Verwendung von Semikolons und geschweiften Klammern anstelle von Zeilenumbrüchen und Einrückungen erfordert Normalerweise verwenden wir SCSS und SASS. Wie sorgen wir also dafür, dass unser Angular-Projekt SCSS oder SASS unterstützt? Die folgenden zwei Methoden werden vorgestellt:

Beim Erstellen eines Projekts angeben
Aktuelles Projekt ändern

1. Geben Sie beim Erstellen des Projekts

an und führen Sie es im angegebenen Verzeichnis aus: ng new myProject –style=scss

Hinweis: wird hier verwendet Angular CLI zum Erstellen von Projekten.

Wenn Sie SASS angeben möchten, ersetzen Sie einfach scss durch sass.

2. Ändern Sie das aktuelle Projekt

Ändern Sie die Datei angle-cli.json. Es gibt zwei Hauptstellen, die geändert werden müssen:

Ändern Sie den styleExt-Wert in den Standardeinstellungen. Setzen Sie ihn auf scss

Auf diese Weise ist die Standardeinstellung, wenn wir Befehle wie ng g Component myComponent ausführen, um Dateien zu generieren Suffix ist scss

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

Ändern Sie „styles.css“ in „Styles“ unter „Apps“ zu „styles.scss“

Hinweis: Nicht vergessen um das Suffix der Datei style.css zu ändern.

 "apps": [
  {
   "root": "src",
   "outDir": "dist",
   "assets": [
    "assets",
    "favicon.ico"
   ],
   "index": "index.html",
   "main": "main.ts",
   "polyfills": "polyfills.ts",
   "test": "test.ts",
   "tsconfig": "tsconfig.app.json",
   "testTsconfig": "tsconfig.spec.json",
   "prefix": "app",
   "styles": [
    "styles.scss"
   ],
   "scripts": [],
   "environmentSource": "environments/environment.ts",
   "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
   }
  }
 ],

angularcli CSS-Projekt in SCSS-Projekt konvertieren

Methode 1:

Beim Hinzufügen neuer The Standard ist scss

ng new My_New_Project --style=scss

Methode 2:

1. Ändern Sie die .angular-cli.json-Konfiguration Datei:

2. Fügen Sie die Datei _variables.scss im src-Verzeichnis hinzu

"defaults": {
   "styleExt": "scss",
}
"styles": [
    "styles.scss"
   ],

3 Die Konfiguration in der Datei lautet wie folgt:

Verwandte Empfehlungen:

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

CSS und Sass (SCSS) Entwicklungsspezifikationen

Implementierung des SCSS-Effekts der mobilen Seitenmaskenebene und Lösungen für häufige Probleme

Grundsätze, die beim Schreiben von SCSS-Code_html/css_WEB befolgt werden sollten -ITnose

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Unterstützung von SCSS in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!