Wie füge ich Sass Kompilierung in Eckigen CLI 6: eckig.json?

Ich gerade erstellt eine neue Eckige Projekt mit dem neuen Winkel-CLI 6.0, aber ich muss hinzufügen, Sass Kompilierung zu meinem Projekt. Ich bin mir dessen bewusst, können Sie ein Kennzeichen setzen, wenn Sie ein Projekt erstellen, aber mein Projekt ist bereits erstellt und die Arbeit wurde getan.

Die neue Konfigurations-Datei, die generiert wird mit den neuen Winkel-CLI heißt jetzt angular.json eher als angular-cli.json. Das Schema für die Datei ist auch anders, mit neuen Eigenschaften.

In der alten angular-cli.json gibt es einen Abschnitt, wo man einstellen kann das stylExt wie so,

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

aber ich bin mir nicht sicher, wo genau diese, wie nach der "test" und "lint" Eigenschaften, gibt ein lint error:

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

Blick auf CLI - docs ich bin nicht zu sehen, nichts, dass darauf hinweisen würde, wo man "styleExt".

Ich habe gesehen, andere Antworten Beratung: ng set defaults.styleExt scss die wirftget/set have been deprecated in favor of the config command..

Versuchte ich ng config set defaults.styleExt scss und npm config set defaults.styleExt scss mit dem ehemaligen werfen einen Fehler und die letztere offenbar keine Auswirkungen auf die Datei, aber ohne Fehler.

Ich würde ein neues Projekt erstellen, mit dem die fahne --style=scss und dann einfach schauen, wie das angular.json wird in das generierte Projekt und kopieren Sie dann die angular.json in Ihrer Anwendung
Sie wissen, dass das eine ziemlich gute Idee, lol. Kleine Dinge wie diese machen mich Wundern, wenn ich sogar ausgeschnitten, um starten Sie eine app, um mit zu beginnen.
--style=scss @SmokeyDawson TY, der mich gerettet hat!

InformationsquelleAutor Esten | 2018-05-03

97

Tut genau das, was Smokey Dawson kommentiert,
```
"projects": {
  "angular-app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
      }
    },
    "architect": {...}
  }
}
```
Oben ist das Ergebnis.
So in Ihrer app unter dem Schlüssel schematics,
fügen Sie einen Schlüssel @schematics/angular:component
mit dem Schlüssel styleext eingestellt scss.

Diese angewendet werden sollte, um Ihre angular.json Datei in das root-Verzeichnis des Projekts.

Und ändern src/styles.css Verweise auf src/styles.scss im angular.json
Ja, das funktioniert der trick. @Dico, haben Sie einen link zu einer Dokumentation für die "schematics" "styletext" Thema bitte?
es ist "styleext" (style-Erweiterung), nicht "styletext". github.com/angular/angular-cli/wiki/angular-workspace github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/...
Winkel-workspace, @Schaltpläne/Winkel:Komponente, styleext
Ich habe SSR auch, wird dieser Effekt automatisch beim erstellen oder muss ich konfigurieren webpack build-Konfiguration für sass-Zusammenstellung?

InformationsquelleAutor Dico
42

Im Winkel 6, Es ist leichter dann. Die Zusammenstellung erfolgt automatisch!
Wie das ?
Verwenden scss auf Komponenten-Ebene, die Sie brauchen, um den Namen der Datei mit der Dateiendung scss (gleichen gehen für weniger, styl). Und in Ihrem Komponente.ts ändern Sie den entsprechenden Stil zu scss zu.

Hier ein screenshoot aus der doc:

Zu nutzen und Scss auf eine globale Skala (src/styles.css), dann brauchen Sie, um Stile ändern.css-Stile.scss (gleichen gehen für weniger, styl ...etc). Und dann gehst du auf eckig.json und ändern Sie die alten Stile.css, um die neuen Stile.scss Wert. Wie in der Abbildung unten:

Hier der link für die doc für den ersten Teil für diejenigen, die wollen, entdecken Sie sich selbst:
https://angular.io/guide/component-styles#non-css-style-files

Jetzt was über die Einstellung, ng-cli-also bei der Generierung neuen Komponente die Erweiterung wird per Standard scss ?
Verwenden Sie die ng config Befehl wie folgt:
```
 ng config schematics.@schematics/angular:component.styleext scss
```
Aktualisiert wird eckig.json mit:
```
"schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
} 
```
Was ist das äquivalent zu den alten Winkel-cli.json
```
    defaults: {
        "styleext": "scss"
    }
```
Ist das für ein Projekt, das schon gestartet ist, aber nicht auf Standard gesetzt bis scss. Wenn Sie ein neues Projekt erstellen, dann verwenden Sie die option --style angeben, wie folgt:
```
ng new my-project --style=scss
```
Und Sie werden nicht über den Präzedenzfall-Befehl, der einen config-Befehl, der es uns ermöglichen, aktualisieren Sie das angegebene Feld in das eckige.json-Datei (da wird es schon richten).

Aber was tun Sie, um zu sehen, die generierte css-Datei? Brauchen wir separate Werkzeuge?
Ich denke, dass Ihre Frage zu beantworten: stackoverflow.com/a/30539642/7668448
Blick auf diese Artikel zu blog.angularindepth.com/...

InformationsquelleAutor Mohamed Allal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.