wake-up-neo.com

Angular-cli von css zu scss

Ich habe die Dokumentation gelesen, die besagt, dass ich, wenn ich scss verwenden möchte, den folgenden Befehl ausführen muss:

ng set defaults.styleExt scss

Aber wenn ich das mache und diese Datei erstelle, erhalte ich immer noch diese Fehlermeldung 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'(…)

Wie kann ich das beheben?

68
Jamie

Für Angular 6 überprüfen Sie die Offizielle Dokumentation

Hinweis: Für @angular/cli-Versionen älter als 6.0.0-beta.6 verwenden Sie ng set anstelle von ng config.

Für bestehende Projekte

In einem vorhandenen angle-cli-Projekt, das mit den Standardstilen css eingerichtet wurde, mü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
  1. Benennen Sie Ihre vorhandenen .css-Dateien in .scss um (d. H. Styles.css und app/app.component.css).

  2. Zeigen Sie mit der CLI nach styles.scss

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

  1. Zeigen Sie auf die Komponenten, um Ihre neuen Style-Dateien zu finden

Ändern Sie die styleUrls in Ihren Komponenten, um sie an Ihre neuen Dateinamen anzupassen

Für zukünftige Projekte

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

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

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

ng config --global defaults.styleExt=scss
148
Chic

Ab ng6 kann dies mit folgendem Code erreicht werden, der angular.json auf der Stammebene hinzugefügt wird:

Manuell in .angular.json ändern:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
41
Jose Orihuela

Öffnen Sie die Datei angle.json

1. ändern 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 .css-Dateien um und aktualisieren Sie die components.ts -Dateien styleUrls aus .css to .scss.

25
BALA

Für Winkel 6

ng config [email protected]/angular:component.styleext scss

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

11
Franklin Pious

CSS-Preprozessor-Integration für Angular CLI: 6.0.3

Beim Erstellen eines neuen Projekts können Sie auch festlegen, welche Erweiterung für Style-Dateien gewünscht wird:

ng new sassy-project --style=sass

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

ng config [email protected]/angular:component.styleext scss

Angular CLI-Dokumentation für alle großen CSS-Präprozessoren

10
Angel Roma

In ng6 müssen Sie diesen Befehl entsprechend einem ähnlichen post verwenden:

ng config [email protected]/angular:component '{ styleext: "scss"}'
3
Jami Bot

Befehl verwenden:

ng config [email protected]/angular:component.styleext scss
2
himanshu sharma

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 übergeben.

Der Befehl, um SCSS in einem Nx-Arbeitsbereich zum Laufen zu bringen:

ng config [email protected]/schematics:component.styleext scss 

1
tilo

Eine Änderung der Rohkraft kann angewendet werden. Dies wird sich ä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'] in styleUrls: ['./app.component.scss']

  3. Speichern und schließen.

In demselben Ordner src/app

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

  2. Folgen Sie dieser Änderung für alle anderen Komponenten. (zB von zu Hause aus, über Kontakt, etc ...)

Als nächstes kommt die Konfigurationsdatei angle.json . Es befindet sich in der Projektwurzel.

  1. Suchen und Ersetzen der CSS ändern Sie sie in (scss) .

  2. Speichern und schließen.

Starten Sie zuletzt Ihren ng serve -o

Wenn sich der Compiler bei Ihnen beschwert, gehen Sie die Schritte noch einmal durch. 

Folgen Sie den Schritten in app/src genau.

0
Frank Thoeny