Ich bin neu bei Angular und komme aus der Ember-Community. Versuch, die neue Angular-CLI zu verwenden, die auf Ember-CLI basiert.
Ich muss wissen, wie ich SASS in einem neuen Angular-Projekt am besten handhaben kann. Ich habe versucht, mit dem ember-cli-sass
Repo zu prüfen, ob es mitspielen würde, da einige Kernkomponenten der Angular-CLI von Ember-CLI-Modulen ausgeführt werden.
Es hat nicht funktioniert, aber ich bin mir nicht sicher, ob ich gerade etwas falsch konfiguriert habe.
Wie lassen sich Stile in einem neuen Angular-Projekt am besten organisieren? Es wäre schön, wenn sich die sass-Datei im selben Ordner wie die Komponente befindet.
angular
sass
angular-cli
JDillon522
quelle
quelle
Antworten:
Andere mögliche Lösungen und Erklärungen:
Um ein neues Projekt mit eckiger CLI mit Sass-Unterstützung zu erstellen , versuchen Sie Folgendes:
Sie können auch
--style=sass
& verwenden, wenn Sie den Unterschied nicht kennen, lesen Sie diesen kurzen und einfachen Artikel. Wenn Sie es immer noch nicht wissen, lernen Sie einfach weiterscss
.Wenn Sie ein Winkel-5-Projekt haben, verwenden Sie diesen Befehl, um die Konfiguration für Ihr Projekt zu aktualisieren.
Für die neuesten Versionen
Damit Angular 6 mit CLI einen neuen Stil für ein vorhandenes Projekt festlegen kann:
Oder direkt in angle.json:
quelle
ng set defaults.styleExt scss
style
Eigenschaft inscss
in.angular-cli.json
ng set defaults.styleExt scss --global
ng config schematics.@schematics/angular:component.styleext scss
Update für Angular 6+
Neue Projekte
Geben Sie beim Generieren eines neuen Projekts mit Angular CLI den CSS-Vorprozessor als an
Verwenden Sie die SCSS-Syntax
Verwenden Sie die SASS-Syntax
Bestehendes Projekt aktualisieren
Legen Sie den Standardstil für ein vorhandenes Projekt fest, indem Sie es ausführen
Verwenden Sie die SCSS-Syntax
Verwenden Sie die SASS-Syntax
Mit dem obigen Befehl wird Ihre Arbeitsbereichsdatei (angle.json) mit aktualisiert
wo
styleext
kann entwederscss
odersass
nach Wahl sein.Ursprüngliche Antwort (für Angular <6)
Neue Projekte
Für neue Projekte können wir die Optionen
--style=sass
oder--style=scss
entsprechend dem gewünschten Geschmack SASS / SCSS einstellenVerwenden Sie die SASS-Syntax
Verwenden Sie die SCSS-Syntax
dann installieren
node-sass
,Bestehende Projekte aktualisieren
Um
angular-cli
Sass-Dateien mit zu kompilierennode-sass
, musste ich ausführen,welches installiert
node-sass
. Dannfür die SASS-Syntax
für die SCSS-Syntax
um den Standard styleExt auf sass zu setzen
(oder)
Ändern Sie
styleExt
zusass
oderscss
für die gewünschte Syntax in.angular-cli.json
,für die SASS-Syntax
für die SCSS-Syntax
Obwohl es Compilerfehler generiert hat.
was durch Ändern der Zeilen von behoben wurde
.angular-cli.json
,entweder,
für die SASS-Syntax
für die SCSS-Syntax
quelle
angular-cli.json
tatsächlich.angular-cli.json
. Als ich das merkte, habe ich es bearbeitet und es funktioniert perfekt. Vielen Dank.angular-cli.json
Datei.angular-cli.json
kürzlich als versteckte Datei ( ) geändert wurde (rc2). Fest..css
Datei umbenennen, müssen Sie sie möglicherweise schließen und in Ihrem Editor erneut öffnen, damit sie die Sass-Syntax richtig erkennt. Dies gilt auch mit dem neuesten Visual Studio,Zitiert aus Officials Github Repo hier -
Siehe hier
quelle
Weisen Sie angle-cli an, standardmäßig immer scss zu verwenden
Um zu vermeiden, dass Sie
--style scss
jedes Mal übergeben, wenn Sie ein Projekt generieren, möchten Sie möglicherweise Ihre Standardkonfiguration von angle-cli global mit dem folgenden Befehl anpassen:Bitte beachten Sie, dass einige Versionen von angle-cli einen Fehler beim Lesen des obigen globalen Flags enthalten ( siehe Link ). Wenn Ihre Version diesen Fehler enthält, generieren Sie Ihr Projekt mit:
quelle
--style=scss
Wie Mertcan sagte, besteht die beste Möglichkeit, scss zu verwenden, darin, das Projekt mit der folgenden Option zu erstellen:
Angular-cli fügt außerdem eine Option zum Ändern des Standard-CSS-Präprozessors hinzu, nachdem das Projekt mithilfe des folgenden Befehls erstellt wurde:
Weitere Informationen finden Sie hier für die Dokumentation:
https://github.com/angular/angular-cli
quelle
ng set
scheint bei Einstellungen imapps
Array nicht zu funktionieren . Z.B.ng set apps.prefix blah
wirft ein "Unerwartetes Token b in JSON an Position 0".Ich bemerkte ein sehr ärgerliches Problem beim Wechsel zu SCSS-Dateien !!! Man muss von einem einfachen:
styleUrls: ['app.component.scss']
zustyleUrls: ['./app.component.scss']
(hinzufügen./
) bewegenapp.component.ts
Was ng tut, wenn Sie ein neues Projekt generieren, aber anscheinend nicht, wenn das Standardprojekt erstellt wird. Wenn beim Erstellen von ng Fehler behoben werden, suchen Sie nach diesem Problem. Ich habe nur ~ 1 Stunde gebraucht.
quelle
Das Beste könnte sein
ng new myApp --style=scss
Dann erstellt Angular CLI jede neue Komponente mit scss für Sie ...
Beachten Sie, dass die Verwendung
scss
im Browser nicht funktioniert, wie Sie wahrscheinlich wissen. Daher benötigen wir etwas, um es zu kompilieren. Auscss
diesem Grund können wirnode-sass
es wie folgt installieren:und du solltest gut gehen!
Wenn Sie Webpack verwenden, lesen Sie hier weiter:
von Angular Starter hier .
quelle
ng set --global defaults.styleExt=scss
ist seit ng6 veraltet. Sie erhalten folgende Nachricht:Du solltest benutzen:
Wenn Sie auf ein bestimmtes Projekt abzielen möchten (ersetzen Sie {project} durch den Namen Ihres Projekts):
quelle
Angular-CLI ist die empfohlene Methode und der Standard in der Angular 2+ -Community.
Kreta ein neues Projekt mit SCSS
ng new My-New-Project --style=sass
Konvertieren Sie ein vorhandenes Projekt (CLI kleiner als v6).
ng set defaults.styleExt scss
(muss mit diesem Ansatz alle CSS-Dateien manuell umbenennen, vergessen Sie nicht, in Ihren Komponentendateien umzubenennen)
Konvertieren Sie ein vorhandenes Projekt (CLI größer als Version 6).
"@schematics/angular:component": { "styleext": "sass" }
quelle
Aktualisieren Sie für Angular 9.0 und höher das
"schematics":{}
Objekt in der Datei angle.json wie folgt :quelle
style
jetzt umbenannt habenFolgendes sollte in einem eckigen CLI 6-Projekt funktionieren. Dh wenn Sie bekommen:
Dann (stellen Sie sicher, dass Sie den Projektnamen ändern )
Um Ihren Standardprojektnamen zu erhalten, verwenden Sie:
Allerdings: Wenn Sie Ihr Projekt von <6 auf Winkel 6 migriert haben, besteht eine gute Chance, dass die Konfiguration nicht vorhanden ist. In diesem Fall erhalten Sie möglicherweise:
Daher ist eine manuelle Bearbeitung
angular.json
erforderlich.Sie möchten, dass es ungefähr so aussieht (beachten Sie die styleex-Eigenschaft):
Scheint mir ein zu komplexes Schema zu sein. ¯_ (ツ) _ / ¯
Sie müssen jetzt alle Ihre CSS / Less-Dateien in SCS ändern und alle Referenzen in Komponenten usw. aktualisieren, aber Sie sollten bereit sein, loszulegen.
quelle
Am 10.03.2019 ließ Anguar die Unterstützung von Sass fallen. Unabhängig davon, an welche Option Sie
--style
beim Ausführen übergeben habenng new
, werden immer.scss
Dateien generiert. Es ist eine Schande, dass die Sass-Unterstützung ohne jede Erklärung eingestellt wurde.quelle
npm install -g @angular/[email protected]
Legen Sie es als globalen Standard fest
ng set defaults.styleExt=scss --global
quelle
Integration von CSS-Präprozessoren Angular CLI unterstützt alle wichtigen CSS-Präprozessoren:
Um diese Präprozessoren zu verwenden, fügen Sie die Datei einfach zu den styleUrls Ihrer Komponente hinzu:
Beim Generieren eines neuen Projekts können Sie auch festlegen, welche Erweiterung für Stildateien gewünscht wird:
Oder legen Sie den Standardstil für ein vorhandenes Projekt fest:
Hinweis: @ schematics / angle ist das Standardschema für die Angular CLI
Dem Array @ Component.styles hinzugefügte Stilzeichenfolgen müssen in CSS geschrieben werden, da die CLI keinen Vorprozessor auf Inline-Stile anwenden kann.
Basierend auf der Winkeldokumentation https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
quelle
Ich habe versucht, mein Projekt mit diesem Befehl zu aktualisieren, um den sass zu verwenden
aber habe das
Also habe ich mein Projekt gelöscht (als ich gerade anfing und keinen Code in meinem Projekt hatte) und ein neues erstellt, bei dem sass ursprünglich eingestellt war
Aber ich würde mich freuen, wenn jemand einen Weg teilen könnte, das bestehende Projekt zu aktualisieren, da dies nett wäre.
quelle
Schritt 1. Installieren Sie das Bulma-Paket mit npm
Schritt 2. Öffnen Sie angle.json und aktualisieren Sie den folgenden Code
Das ist es.
Fügen Sie stylePreprocessorOptions zu angle.json hinzu, um Bulmas Tools einfach verfügbar zu machen.
BULMA + WINKEL 6
quelle