Ich habe die Dokumentation gelesen , die besagt, dass ich scss
den folgenden Befehl ausführen muss , wenn ich verwenden möchte :
ng set defaults.styleExt scss
Aber wenn ich das mache und diese Datei mache, erhalte ich immer noch diesen Fehler in meiner Konsole:
styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)
git diff
sehen, was sich geändert hat.ng new whatever --style=scss
wie in den Dokumenten gezeigt vor . Befolgen Sie nicht die Anweisungen zum Konfigurieren eines vorhandenen Projekts, wenn Sie dies nicht tun!Antworten:
Informationen zu Angular 6 finden Sie in der offiziellen Dokumentation
Hinweis: Für
@angular/cli
Versionen , die älter als die6.0.0-beta.6
Verwendungng set
anstelle vonng config
.Für bestehende Projekte
In einem vorhandenen Angular-Cli-Projekt, das mit den Standardstilen eingerichtet wurde,
css
müssen Sie einige Dinge tun:scss
Wenn Sie eine Fehlermeldung erhalten:
Value cannot be found.
Verwenden Sie den folgenden Befehl:(* Quelle: Angular CLI SASS-Optionen )
Benennen Sie Ihre vorhandenen
.css
Dateien in.scss
(dh styles.css und app / app.component.css) um.Zeigen Sie auf die CLI, um styles.scss zu finden
Für zukünftige Projekte
Wie bei @Serginho erwähnt, können Sie die Stilerweiterung festlegen, wenn Sie den
ng new
Befehl ausführenWenn Sie die Standardeinstellung für alle Projekte festlegen möchten, die Sie in Zukunft erstellen, führen Sie den folgenden Befehl aus:
quelle
css
inscss
in ändern ,.angular-cli.json
werden automatisch scss-Dateien für jede neue Komponente erstellt, die in Zukunft generiert wird.ng config schematics.@schematics/angular:component.styleext scss
wie von @ hamilton.limaAb ng6 kann dies mit dem folgenden Code erreicht werden,
angular.json
der auf Stammebene hinzugefügt wurde :Manuelles Ändern in
.angular.json
:quelle
schematics
nicht auf der Root-Ebene, sondern in meinem Projekt in verschachteltangular.json
. Sollte ich das ignorieren und dies stattdessen auf der Stammebene hinzufügen?schematics
nun ebenfalls verschachtelt.Öffnen Sie die Datei angle.json
1. Wechseln Sie von
"schematics": {}
zu
"src/styles.css"
zu
"src/styles.scss"
Überprüfen und benennen Sie dann alle
.css
Dateien um und aktualisieren Sie die Datei componentUts styleUrls von.css to .scss
quelle
ng config schematics.@schematics/angular:component.styleext scss
wie in den offiziellen Dokumenten angegeben: github.com/angular/angular-cli/wiki/stories-css-preprocessorsFür Winkel 6
Hinweis: @ schematics / angle ist das Standardschema für die Angular CLI
quelle
CSS-Präprozessorintegration für Angular CLI: 6.0.3
Beim Generieren eines neuen Projekts können Sie auch definieren, welche Erweiterung Sie für Stildateien wünschen:
Oder legen Sie den Standardstil für ein vorhandenes Projekt fest:
Angular CLI-Dokumentation für alle wichtigen CSS-Präprozessoren
quelle
Invalid JSON character: "s" at 0:0.
ng config
(wie oben) ist die beste Methode , aber Sie haben noch umbenennen müssen ,*.css
um Dateien*.scss
und Verweise ersetzen inangular.json
zustyle.css
mitstyle.scss
und aktualisieren alle Komponentendateireferenzen instyleUrls
Immobilien an die neuen Namen. ... dann funktioniert es super!Für bestehende Projekte :
In
angular.json
DateiIn
build
Teil und intest
Teil ersetzen:"styles": ["src/styles.css"],
durch"styles": ["src/styles.scss"],
Ersetzen:
"schematics": {},
durch"schematics": { "@schematics/angular:component": { "style": "scss" } },
Benennen Sie in Ihrem Projekt Ihre
.css
Dateien in um.scss
Für ein neues Projekt erledigt dieser Befehl die ganze Arbeit:
Zur globalen Konfiguration
Neue Versionen scheinen keinen globalen Befehl zu haben
quelle
Befehl verwenden:
quelle
In ng6 müssen Sie diesen Befehl gemäß einem ähnlichen Beitrag verwenden :
quelle
Für Benutzer der Nrwl-Erweiterungen , die auf diesen Thread stoßen: Alle Befehle werden von Nx (z. B.
ng generate component myCompent
) abgefangen und dann an die AngularCLI weitergegeben.Der Befehl, um SCSS in einem Nx-Arbeitsbereich zum Laufen zu bringen:
ng config schematics.@nrwl/schematics:component.styleext scss
quelle
Eine Brute-Force-Änderung kann angewendet werden. Dies wird funktionieren, um sich zu ändern, aber es ist ein längerer Prozess.
Gehen Sie zum App-Ordner src / app
Öffnen Sie diese Datei: app.component.ts
Ändern Sie diesen Code
styleUrls: ['./app.component.css']
instyleUrls: ['./app.component.scss']
Speichern und schließen.
Im selben Ordner src / app
Benennen Sie die Erweiterung für die Datei app.component.css in (app.component.scss) um.
Befolgen Sie diese Änderung für alle anderen Komponenten. (zB zu Hause, über, Kontakt, etc ...)
Die Konfigurationsdatei angle.json ist die nächste. Es befindet sich im Projektstamm.
Suchen und Ersetzen des CSS Ändern Sie es in (scss) .
Speichern und schließen.
Zuletzt starten Sie Ihre neu
ng serve -o
.Wenn sich der Compiler bei Ihnen beschwert, gehen Sie die Schritte erneut durch.
Stellen Sie sicher, dass Sie die Schritte in app / src genau befolgen .
quelle
In der neuesten Version von Angular (v9) muss der folgende Code hinzugefügt werden
angular.json
Kann mit dem folgenden Befehl hinzugefügt werden:
quelle