Wie behebe ich den „styles.bundle.js:33 Uncaught Error' in Angular-CLI bei Verwendung von SCSS?

Fehlerbehebung des Fehlers „styles.bundle.js:33Uncaught Error“ bei der Verwendung von Angular-CLI mit SCSS

Sie sind auf ein Problem gestoßen, bei dem Angular -CLI löst bei Verwendung von SCSS den Fehler „styles.bundle.js:33Uncaught Error“ aus. In der Dokumentation heißt es zwar, dass die Ausführung von ng set defaults.styleExt scss dieses Problem beheben sollte, bei Ihnen funktioniert es jedoch nicht. Lassen Sie uns die Gründe dafür untersuchen und eine umfassende Lösung anbieten.

Fehlerursache

Der Fehler tritt auf, weil die CLI immer noch versucht, CSS-Dateien zu finden und zu bündeln Styling. Angular-CLI beginnt zunächst mit CSS als Standardstilerweiterung. Wenn Sie versuchen, SCSS zu verwenden, muss die CLI so konfiguriert sein, dass sie SCSS-Dateien erkennt und verarbeitet.

Lösung für bestehende Projekte

1. Standardstilerweiterung aktualisieren:

   • Ändern Sie in Angular 5.x und früher die .angular-cli.json-Datei.
   • Ändern Sie in Angular 6 die Datei angle.json.
   • Alternativ führen Sie ng config defaults.styleExt=scss aus. Wenn dies zu einem Fehler führt, verwenden Sie ng config schematisches.@schematics/angular:component.styleext scss.

2. CSS-Dateien in SCSS umbenennen:

   • Styles.css und Komponenten-CSS-Dateien ändern (z. B. app/app.component.css) in style.scss und entsprechende Komponenten-SCSS-Dateien.

3. Angular.json aktualisieren (nur für Angular 6):

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

4. Komponenten auf neue Stildateien verweisen:

   • Ändern Sie die styleUrls-Eigenschaften in den Komponentendefinitionen in mit der neuen SCSS-Datei übereinstimmen Namen.

Lösung für zukünftige Projekte

1. Stilerweiterung während der Projekterstellung festlegen:

   • Geben Sie beim Erstellen eines neuen Projekts mit ng new Folgendes an --style=scss.

2. Globalen Standard festlegen:

   • Wenn Sie lieber SCSS als Standardstil verwenden möchten Führen Sie zur Erweiterung für alle zukünftigen Projekte Folgendes aus:

   ng config --global defaults.styleExt=scss

Das obige ist der detaillierte Inhalt vonWie behebe ich den „styles.bundle.js:33 Uncaught Error' in Angular-CLI bei Verwendung von SCSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!