Angular-Cli von CSS zu SCS

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'(…)

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 )

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

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

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

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

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"
  }
}

Öffnen Sie die Datei angle.json

1. Wechseln Sie von

"schematics": {}

zu

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

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

Für Winkel 6

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

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

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

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

Befehl verwenden:

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

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

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

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

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 .

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