Wie kann in Angular CLI-Projekten erfolgreich von CSS auf SCSS umgestellt werden?

Angular CLI-Übergang von CSS zu SCSS

Angular CLI bietet die Möglichkeit, SCSS-Stylesheets in Ihren Projekten zu verwenden. Wenn Sie jedoch beim Implementieren von SCSS auf den Fehler „Keine solche Datei oder kein solches Verzeichnis“ stoßen, müssen bestimmte Schritte unternommen werden.

Befehl für die Standardstilerweiterung

Wie in der Dokumentation erwähnt, sollte die Ausführung von „ng set defaults.styleExt scss“ die Standardstilerweiterung auf SCSS setzen. Dieser Befehl funktioniert jedoch möglicherweise nicht immer wie erwartet.

Lösung für bestehende Projekte

1. Standardstilerweiterung in SCSS ändern:

   • Bearbeiten Sie die Datei .angular-cli.json (Angular 5.x und älter) oder die Datei angle.json (Angular 6), um „defaults.styleExt“ manuell auf „scss“ zu setzen.

2. CSS-Dateien in SCSS umbenennen:

   • Konvertieren Sie vorhandene „.css“-Dateien in „.scss“ und aktualisieren Sie die Referenzen in das Projekt.

3. Zeigen Sie die CLI auf „styles.scss“:

   • Ändern Sie das Array „styles“ im Winkel. json-Datei, um auf die neue Datei „styles.scss“ zu verweisen Dateien.

4. Komponentenreferenzen aktualisieren:

   • Passen Sie die Eigenschaft „styleUrls“ in einzelnen Komponentendateien an, um die aktualisierten Dateien widerzuspiegeln SCSS-Dateinamen.

Standardeinstellung für Zukünftige Projekte

Beim Erstellen neuer Projekte können Sie die Stilerweiterung während der Projekterstellung angeben:

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

So legen Sie die Standardstilerweiterung für alle neuen Projekte global fest:

ng config --global defaults.styleExt=scss

Das obige ist der detaillierte Inhalt vonWie kann in Angular CLI-Projekten erfolgreich von CSS auf SCSS umgestellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!