Angular-Cli von CSS zu SCS

133

Ich habe die Dokumentation gelesen , die besagt, dass ich scssden 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'(…)
Jamie
quelle
1
Das funktioniert nur für Dateien, die Sie ab diesem Zeitpunkt generieren. Ich glaube nicht, dass es die bereits vorhandenen Dateien behebt. Wenn Sie git diffsehen, was sich geändert hat.
Jonrsharpe
Aber ich habe noch keine Dateien. Ich möchte nur wechseln.
Jamie
Wie hast du noch keine Dateien? Wenn Sie ein neues Projekt erstellen, warum konfigurieren Sie es dann so?
Jonrsharpe
Ich fange gerade mit angle2 an. Ich versuche alles herauszufinden.
Jamie
1
Wenn Sie ein neues Projekt erstellen, gehen Sie 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!
Jonrsharpe

Antworten:

266

Informationen zu Angular 6 finden Sie in der offiziellen Dokumentation

Hinweis: Für @angular/cliVersionen , die älter als die 6.0.0-beta.6Verwendung ng setanstelle von ng config.

Für bestehende Projekte

In einem vorhandenen Angular-Cli-Projekt, das mit den Standardstilen eingerichtet wurde, cssmüssen Sie einige Dinge tun:

  1. Ändern Sie die Standardstilerweiterung in scss

Manuelles Ändern in .angular-cli.json(Angular 5.x und älter) oder angular.json(Angular 6+) oder Ausführen:

ng config defaults.styleExt=scss

Wenn Sie eine Fehlermeldung erhalten: Value cannot be found.Verwenden Sie den folgenden Befehl:

ng config schematics.@schematics/angular:component.styleext scss

(* Quelle: Angular CLI SASS-Optionen )

  1. Benennen Sie Ihre vorhandenen .cssDateien in .scss(dh styles.css und app / app.component.css) um.

  2. Zeigen Sie auf die CLI, um styles.scss zu finden

Ändern Sie die Dateierweiterungen manuell in apps[0].stylesinangular.json

  1. Zeigen Sie auf die Komponenten, um Ihre neuen Stildateien zu finden

Ändern Sie die styleUrlsin Ihren Komponenten, um Ihren neuen Dateinamen zu entsprechen

Für zukünftige Projekte

Wie bei @Serginho erwähnt, können Sie die Stilerweiterung festlegen, wenn Sie den ng newBefehl ausführen

ng new your-project-name --style=scss

Wenn Sie die Standardeinstellung für alle Projekte festlegen möchten, die Sie in Zukunft erstellen, führen Sie den folgenden Befehl aus:

ng config --global defaults.styleExt=scss
Schick
quelle
6
EDIT: Ich musste nur den Echtzeit-Builder aktualisieren. Es funktioniert richtig
Cristian Traìna
1
@ angle / cli 1.7.3: Wenn Sie defaults.styleExt von cssin scssin ändern , .angular-cli.jsonwerden automatisch scss-Dateien für jede neue Komponente erstellt, die in Zukunft generiert wird.
SimonHawesome
4
ng set defaults.styleExt scss für bestehende Projekte
smedasn
9
für Winkel 6 folgen Sie diesem github.com/angular/angular-cli/wiki/stories-css-preprocessors
hamilton.lima
22
@chovy für die neueste Angular Cli-Version, in meinem Fall (6.0.7) verwenden Sie diesen Befehl für bestehende Projekte: ng config schematics.@schematics/angular:component.styleext scss wie von @ hamilton.lima
Farhan
52

Ab ng6 kann dies mit dem folgenden Code erreicht werden, angular.jsonder auf Stammebene hinzugefügt wurde :

Manuelles Ändern in .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
Jose Orihuela
quelle
Ich habe schematicsnicht auf der Root-Ebene, sondern in meinem Projekt in verschachtelt angular.json. Sollte ich das ignorieren und dies stattdessen auf der Stammebene hinzufügen?
mcheah
1
@mcheah, ja, so ist auch mein Setup eingerichtet und es funktioniert.
Eric Soyke
Ich habe meine im Projekt verschachtelt gelassen und es sieht so aus, als würde das auch gut funktionieren, nur als FYI für jeden, der die gleiche Frage hat.
mcheah
Nach dem Update auf die neuesten ng6-Versionen ist my schematicsnun ebenfalls verschachtelt.
Jose Orihuela
Das scheint für mich nichts zu ändern. Scss-Regeln in CSS-Dateien werden immer noch nicht verarbeitet.
Chovy
34

Öffnen Sie die Datei angle.json

1. Wechseln Sie von

"schematics": {}

zu

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. Wechsel von (an zwei Stellen)

"src/styles.css"

zu

"src/styles.scss"

Überprüfen und benennen Sie dann alle .cssDateien um und aktualisieren Sie die Datei componentUts styleUrls von.css to .scss

BALA
quelle
4
Schritt 1 kann über die CLI ausgeführt werden: ng config schematics.@schematics/angular:component.styleext scss wie in den offiziellen Dokumenten angegeben: github.com/angular/angular-cli/wiki/stories-css-preprocessors
Marian07
13

Für Winkel 6

ng config schematics.@schematics/angular:component.styleext scss

Hinweis: @ schematics / angle ist das Standardschema für die Angular CLI

Franklin Fromm
quelle
11

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:

ng new sassy-project --style=sass

Oder legen Sie den Standardstil für ein vorhandenes Projekt fest:

ng config schematics.@schematics/angular:component.styleext scss

Angular CLI-Dokumentation für alle wichtigen CSS-Präprozessoren

Engel Roma
quelle
1
Invalid JSON character: "s" at 0:0.
Chovy
Ab Angular CLI 6.0.8 ng config(wie oben) ist die beste Methode , aber Sie haben noch umbenennen müssen , *.cssum Dateien *.scssund Verweise ersetzen in angular.jsonzu style.cssmit style.scssund aktualisieren alle Komponentendateireferenzen in styleUrlsImmobilien an die neuen Namen. ... dann funktioniert es super!
gkl
8

Für bestehende Projekte :

In angular.jsonDatei

  1. In buildTeil und in testTeil ersetzen:

    "styles": ["src/styles.css"], durch "styles": ["src/styles.scss"],

  2. Ersetzen:

    "schematics": {}, durch "schematics": { "@schematics/angular:component": { "style": "scss" } },

Die Verwendung des ng config schematics.@schematics/angular:component.styleext scssBefehls funktioniert, die Konfiguration wird jedoch nicht an derselben Stelle platziert.

Benennen Sie in Ihrem Projekt Ihre .cssDateien in um.scss

Für ein neues Projekt erledigt dieser Befehl die ganze Arbeit:

ng n project-name --style=scss

Zur globalen Konfiguration

Neue Versionen scheinen keinen globalen Befehl zu haben

veben
quelle
6

Befehl verwenden:

ng config schematics.@schematics/angular:component.styleext scss
Himanshu Sharma
quelle
3

In ng6 müssen Sie diesen Befehl gemäß einem ähnlichen Beitrag verwenden :

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
Jameson Saunders
quelle
3

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

Tilo
quelle
Genial, suchte danach. Danke dir!
Ruan Petersen
2

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

  1. Öffnen Sie diese Datei: app.component.ts

  2. Ändern Sie diesen Code styleUrls: ['./app.component.css']instyleUrls: ['./app.component.scss']

  3. Speichern und schließen.

Im selben Ordner src / app

  1. Benennen Sie die Erweiterung für die Datei app.component.css in (app.component.scss) um.

  2. 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.

  1. Suchen und Ersetzen des CSS Ändern Sie es in (scss) .

  2. 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 .

Frank Thoeny
quelle
1

In der neuesten Version von Angular (v9) muss der folgende Code hinzugefügt werden angular.json

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

Kann mit dem folgenden Befehl hinzugefügt werden:

ng config schematics.@schematics/angular:component.style scss
Partha Ranjan
quelle