Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erklärung zur Unterstützung von SCSS in Angular

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

小云云
小云云Original
2017-12-19 16:49:031771Durchsuche

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
  1. 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn