Wie konvertiere ich mein Angular-CLI-Projekt von CSS nach SCSS?

Konvertieren von Angular-CLI-Projekten von CSS nach SCSS

Beim Versuch, SCSS in einem Angular-CLI-Projekt zu verwenden, kann ein Fehler auftreten bezüglich der Nichtexistenz einer Datei „styles.css“. Dieser Fehler tritt auf, obwohl die Standardstilerweiterung mithilfe des scss-Befehls ng set defaults.styleExt auf SCSS festgelegt wurde.

Lösung:

Um dieses Problem zu beheben, führen Sie die folgenden Schritte aus :

Für bestehende Projekte (Angular CLI-Versionen älter als 6):

1. Ändern Sie die Standardstilerweiterung in SCSS:

   • Bearbeiten Sie die Datei .angular-cli.json manuell und ersetzen Sie CSS durch SCSS im Styles-Array.

   • Alternativ führen Sie Folgendes aus: Befehl:

     ng config defaults.styleExt=scss

2. Vorhandene CSS-Dateien in SCSS konvertieren:

   • Alle vorhandenen .css-Dateien in .scss umbenennen, einschließlich styles.css.

3. Passen Sie den Build an Konfiguration:

   • Bearbeiten Sie die Eigenschaft apps[0].styles in der Datei .angular-cli.json und ersetzen Sie die .css-Erweiterungen durch .scss.

4. Komponentenstile aktualisieren:

   • Ändern Sie das styleUrls-Array in Ihren Komponentendateien so, dass es auf die verweist neue .scss-Dateien.

Für bestehende Projekte (Angular CLI Version 6):

Verwenden Sie beim Bearbeiten die gleichen Schritte wie oben die Datei „angular.json“ anstelle von „.angular-cli.json“. Wenn außerdem die Fehlermeldung „Wert kann nicht gefunden werden“ auftritt, führen Sie den folgenden Befehl aus:

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

Für neue Projekte:

1. Geben Sie SCSS als Stilerweiterung an, wenn Sie ein neues Projekt erstellen:

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

2. Set SCSS als Standard für alle zukünftigen Projekte (optional):

   ng config --global defaults.styleExt=scss

Indem Sie diese Schritte befolgen, konfigurieren Sie Ihr Angular-CLI-Projekt erfolgreich für die Verwendung von SCSS.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich mein Angular-CLI-Projekt von CSS nach SCSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!