wake-up-neo.com

Wie füge ich die Sass-Kompilierung in Angular CLI 6: angular.json hinzu?

Ich habe gerade ein neues Angular Projekt mit der neuen Angular CLI 6.0 erstellt, aber ich muss meinem Projekt die Sass-Kompilierung hinzufügen. Ich bin mir bewusst, dass Sie beim Erstellen eines Projekts ein Flag setzen können, aber mein Projekt ist bereits erstellt und die Arbeit ist abgeschlossen.

Die neue Konfigurationsdatei, die mit der neuen Angular CLI generiert wird, heißt jetzt angular.json und nicht mehr angular-cli.json. Das Schema für die Datei unterscheidet sich ebenfalls mit neuen Eigenschaften.

Im alten angular-cli.json gibt es einen Abschnitt, in dem Sie stylExt wie folgt einstellen können:

"defaults": {
    "styleExt": "scss"
}

aber ich bin nicht sicher, wo genau ich das anbringen soll, da nach den Eigenschaften "test" und "lint" ein Flusenfehler von:

Matches multiple schemas when only one must validate.

und Gebäude produziert:

Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt).

Ein Blick auf CLIs Dokumente Ich sehe nichts, was darauf hindeutet, wo "styleExt" abgelegt werden soll.

Ich habe andere Ratschläge erhalten: ng set defaults.styleExt scss was get/set have been deprecated in favor of the config command. auslöst.

Ich habe ng config set defaults.styleExt scss und npm config set defaults.styleExt scss ausprobiert, wobei ersteres einen Fehler verursachte und letzteres anscheinend keine Auswirkung auf die Datei hatte, jedoch ohne Fehler.

67
Esten

Genau das zu tun, was Smokey Dawson kommentierte ,

"projects": {
  "angular-app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
      }
    },
    "architect": {...}
  }
}

Das Obige ist das Ergebnis. Fügen Sie in Ihrer App unter dem Schlüssel schematics einen Schlüssel @schematics/angular:component hinzu, wobei der Schlüssel styleext auf scss gesetzt ist.

Dies sollte auf Ihre angular.json -Datei im Stammverzeichnis Ihres Projekts angewendet werden.

108
Dico

In Angular 6 ist das einfacher. Die Zusammenstellung erfolgt automatisch! Wie das ? Um scss auf Komponentenebene zu verwenden, müssen Sie die Datei mit der Erweiterung scss benennen (dasselbe gilt für weniger, styl ). Und in Ihrer component.ts ändern Sie auch den entsprechenden Stil in scss .

Hier ein Screenshot des Dokuments: enter image description here

Und um Scss auf einer globalen Skala zu verwenden (src/styles.css), müssen Sie styles.css in styles.scss ändern (dasselbe gilt für less, styl ... etc). Anschließend wechseln Sie zu angular.json und ändern die alte Datei styles.css in den neuen Wert styles.scss. Wie im Bild unten gezeigt:

enter image description here

Hier der Link zum Dokument für den ersten Teil für diejenigen, die sich selbst erkunden möchten: https://angular.io/guide/component-styles#non-css-style-files

Was ist nun mit dem Einrichten von ng-cli, damit beim Generieren einer neuen Komponente die Erweiterung standardmäßig scss lautet? Verwenden Sie den Befehl ng config wie folgt:

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

Das aktualisiert angular.json mit:

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

Welches ist das Äquivalent zu der alten eckigen-cli.json

    defaults: {
        "styleext": "scss"
    }

Dies gilt für ein Projekt, das bereits gestartet wurde, jedoch nicht standardmäßig auf scss eingestellt ist. Wenn Sie ein neues Projekt erstellen, verwenden Sie die Option --style, um dies wie folgt festzulegen:

ng new my-project --style=scss

Und Sie müssen nicht den vorhergehenden Befehl verwenden, bei dem es sich um einen Konfigurationsbefehl handelt, mit dem wir das angegebene Feld in der Datei angular.json aktualisieren können (da es bereits festgelegt ist).

53
Mohamed Allal