So unterstützen Sie SCSS in Angular

SCSS ist eine neue Syntax, die mit 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 Stylesheets sind gültige SCSS-Dateien mit derselben Semantik. Darüber hinaus erkennt SCSS die meisten CSS-Hacks (einige CSS Tipps) und browserspezifische Syntax, wie zum Beispiel die alte IE-Filtersyntax.

Da SCSS eine Erweiterung von CSS ist, funktioniert jeder Code, der in CSS funktioniert, auch in SCSS. Das heißt, für einen Sass Benutzer müssen lediglich verstehen, wie Sass-Erweiterungen funktionieren, um SCSS vollständig zu verstehen. Die meisten Erweiterungen wie Variablen, übergeordnete Referenzen usw Die Anweisungen sind alle gleich; der einzige Unterschied besteht darin, dass SCSS Semikolons und geschweifte Klammern anstelle von Zeilenumbrüchen und Einzügen erfordert

Beim Hinzufügen von Stilen zu Komponenten verwenden wir für die Modularisierung von Stilen normalerweise SCSS und SASS. Wie sorgen wir also dafür, dass unser Angular-Projekt SCSS oder SASS unterstützt? Das Folgende wird auf zwei Arten eingeführt:

1. Beim Erstellen eines Projekts angeben

2. Aktuelles Projekt ändern

1. Geben Sie beim Erstellen des Projekts

an Im angegebenen Verzeichnis ausführen: ng new myProject –style=scss

Hinweis: Zum Erstellen des Projekts wird hier die CLI von Angular verwendet.

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

2. Ändern Sie das aktuelle Projekt

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

Setzen Sie den styleExt-Wert in den Standardeinstellungen auf scss

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

Wenn wir auf diese Weise Befehle wie ng g Component myComponent ausführen, um Dateien zu generieren, lautet das Standardsuffix scss

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

 "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"
   }
  }
 ],

“. Hinweis: Vergessen Sie nicht, das Suffix der Datei style.css zu ändern.

Angularcli konvertiert CSS-Projekt in SCSS-Projekt

Methode 1:

Beim Hinzufügen ist der Standardwert scss

ng new My_New_Project --style=scss

Methode 2:

1. Ändern Sie die .angular-cli.jsonKonfigurationsdatei:

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

2. Fügen Sie die Datei _variables.scss

im src-Verzeichnis hinzu 3. Die Konfiguration in der Datei style.scss lautet wie folgt:

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

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: