Heim > Artikel > Web-Frontend > 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:
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.
Ä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
"defaults": { "styleExt": "scss", "component": {} }
Ändern Sie „styles.css“ in „Styles“ unter „Apps“ zu „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" } } ],angularcli CSS-Projekt in SCSS-Projekt konvertieren
Beim Hinzufügen neuer The Standard ist scss
ng new My_New_Project --style=scssMethode 2:
1. Ändern Sie die .angular-cli.json-Konfiguration Datei:
"defaults": { "styleExt": "scss", } "styles": [ "styles.scss" ],
3 Die Konfiguration in der Datei lautet wie folgt:
@import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap';
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!