Angular CLI SASS-Optionen

329

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

JDillon522
quelle
3
Sie könnten einen Blick darauf werfen, wie es in github.com/angular/material2 verwendet wird, zum Beispiel die Schaltflächenkomponente github.com/angular/material2/tree/master/src/components/button
Günter Zöchbauer

Antworten:

544

Angular CLI Version 9 (zum Erstellen von Angular 9-Projekten) wird jetzt styleanstelle von Schaltplänen verwendet styleext. Verwenden Sie den Befehl wie folgt :
ng config schematics.@schematics/angular:component.style scss
und die resultierende angle.json soll so aussehen

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

Andere mögliche Lösungen und Erklärungen:

Um ein neues Projekt mit eckiger CLI mit Sass-Unterstützung zu erstellen , versuchen Sie Folgendes:

ng new My_New_Project --style=scss 

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 weiter scss.

Wenn Sie ein Winkel-5-Projekt haben, verwenden Sie diesen Befehl, um die Konfiguration für Ihr Projekt zu aktualisieren.

ng set defaults.styleExt scss

Für die neuesten Versionen

Damit Angular 6 mit CLI einen neuen Stil für ein vorhandenes Projekt festlegen kann:

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

Oder direkt in angle.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}
Mertcan Diken
quelle
17
Dann können Sie es von angular.cli.json in dieser Datei ändern. Es gibt "Standardwerte": {"styleExt": "css", "prefixInterfaces": false, "inline": {"style": false, "template": false} Sie können den styleExt ändern
Mertcan Diken
145
ng set defaults.styleExt scss
Sebas
4
Vergessen Sie nicht, die styleEigenschaft in scssin.angular-cli.json
OST
3
ng set defaults.styleExt scss --global
Joshua David
29
Für Angular 6, um neuen Stil auf bestehendes Projekt zu setzenng config schematics.@schematics/angular:component.styleext scss
Nehal Damania
344

Update für Angular 6+

  1. Neue Projekte

    Geben Sie beim Generieren eines neuen Projekts mit Angular CLI den CSS-Vorprozessor als an

    • Verwenden Sie die SCSS-Syntax

      ng new sassy-project --style=scss
      
    • Verwenden Sie die SASS-Syntax

      ng new sassy-project --style=sass
      
  2. Bestehendes Projekt aktualisieren

    Legen Sie den Standardstil für ein vorhandenes Projekt fest, indem Sie es ausführen

    • Verwenden Sie die SCSS-Syntax

      ng config schematics.@schematics/angular:component.styleext scss
      
    • Verwenden Sie die SASS-Syntax

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

    Mit dem obigen Befehl wird Ihre Arbeitsbereichsdatei (angle.json) mit aktualisiert

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

    wo styleextkann entweder scssoder sassnach Wahl sein.




Ursprüngliche Antwort (für Angular <6)

Neue Projekte

Für neue Projekte können wir die Optionen --style=sassoder --style=scssentsprechend dem gewünschten Geschmack SASS / SCSS einstellen

  • Verwenden Sie die SASS-Syntax

    ng new project --style=sass 
    
  • Verwenden Sie die SCSS-Syntax

    ng new project --style=scss 
    

dann installieren node-sass,

npm install node-sass --save-dev

Bestehende Projekte aktualisieren

Um angular-cliSass-Dateien mit zu kompilieren node-sass, musste ich ausführen,

npm install node-sass --save-dev 

welches installiert node-sass. Dann

  • für die SASS-Syntax

    ng set defaults.styleExt sass
    
  • für die SCSS-Syntax

    ng set defaults.styleExt scss
    

um den Standard styleExt auf sass zu setzen

(oder)

Ändern Sie styleExtzu sassoder scssfür die gewünschte Syntax in .angular-cli.json,

  • für die SASS-Syntax

    "defaults": {
         "styleExt": "sass",
    }
    
  • für die SCSS-Syntax

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


Obwohl es Compilerfehler generiert hat.

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

was durch Ändern der Zeilen von behoben wurde .angular-cli.json,

"styles": [
        "styles.css"
      ],

entweder,

  • für die SASS-Syntax

    "styles": [
            "styles.sass"
          ],
    
  • für die SCSS-Syntax

    "styles": [
            "styles.scss"
          ],
    
Alles ist gut
quelle
3
Das einzige, mit dem ich Probleme hatte, war das angular-cli.jsontatsächlich .angular-cli.json. Als ich das merkte, habe ich es bearbeitet und es funktioniert perfekt. Vielen Dank.
OldTimeGuitarGuy
@OldTimeGuitarGuy Vielen Dank für den Hinweis, dass die einmal benannte angular-cli.jsonDatei .angular-cli.jsonkürzlich als versteckte Datei ( ) geändert wurde (rc2). Fest.
Alles ist gut 26.
Wenn Sie eine vorhandene .cssDatei 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,
Simon_Weaver
1
Für Angular 6 ist Node-Sass bereits installiert, sodass es nicht installiert werden muss.
alles zerstören
1
Ich habe das gleiche Setup, aber das direkte Importieren von scss-Dateien in Komponenten funktioniert nicht, während das Importieren in styles.scss einwandfrei funktioniert. Ich verwende Angular Cli Verison 7+. Gibt es einen Fehler?
Hemant Sankhla
37

Zitiert aus Officials Github Repo hier -

Um eine zu verwenden, installieren Sie zum Beispiel

npm install node-sass

und benennen Sie .css-Dateien in Ihrem Projekt in .scss oder .sass um. Sie werden automatisch kompiliert. Das Optionsargument der Angular2App enthält die Optionen sassCompiler, lessCompiler, stylusCompiler und kompassCompiler, die direkt an die jeweiligen CSS-Präprozessoren übergeben werden.

Siehe hier

regnar
quelle
5
Vielleicht möchten Sie hinzufügen --save-dev, nicht sicher, warum es nicht in den Dokumenten so ist, aber es verloren, als wir ein Upgrade durchgeführt haben und dann nicht herausfinden konnten, warum unsere Stile weg waren
regnar
2
Es gab ein Problem, bei dem auch Sass-Dateien mit führenden Unterstrichen kompiliert wurden, das jedoch ab Angular-Cli 1.0.0-Beta.9
Andy Ford
Der Link hat sich geändert zu: github.com/angular/angular-cli/wiki/stories-css-preprocessors
martin
26

Weisen Sie angle-cli an, standardmäßig immer scss zu verwenden

Um zu vermeiden, dass Sie --style scssjedes Mal übergeben, wenn Sie ein Projekt generieren, möchten Sie möglicherweise Ihre Standardkonfiguration von angle-cli global mit dem folgenden Befehl anpassen:

ng set --global defaults.styleExt scss


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:

ng new some_project_name --style=scss
Michael P. Bazos
quelle
Ich bin auf angleCLI v. 1.2.1 (Stand: Juli 2017) und habe den von Ihnen beschriebenen Fehler. Ich habe diesen Befehl ausgeführt und er scheint standardmäßig perfekt für neue Komponenten zu funktionieren, aber neue Projekte erstellen immer noch die app.component.css, es sei denn, ich gebe an--style=scss
Jeremy Moritz
21

Wie Mertcan sagte, besteht die beste Möglichkeit, scss zu verwenden, darin, das Projekt mit der folgenden Option zu erstellen:

ng new My_New_Project --style=scss 

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:

ng set defaults.styleExt scss

Weitere Informationen finden Sie hier für die Dokumentation:

https://github.com/angular/angular-cli

Jared Wadsworth
quelle
3
ng setscheint bei Einstellungen im appsArray nicht zu funktionieren . Z.B. ng set apps.prefix blahwirft ein "Unerwartetes Token b in JSON an Position 0".
Im1dermike
15

Ich bemerkte ein sehr ärgerliches Problem beim Wechsel zu SCSS-Dateien !!! Man muss von einem einfachen: styleUrls: ['app.component.scss']zu styleUrls: ['./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.

JoelParke
quelle
3
Dies ist in app.component.ts für diejenigen, die zu faul sind, um zu suchen :)
embee
5

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 scssim Browser nicht funktioniert, wie Sie wahrscheinlich wissen. Daher benötigen wir etwas, um es zu kompilieren. Aus cssdiesem Grund können wir node-sasses wie folgt installieren:

npm install node-sass --save-dev

und du solltest gut gehen!

Wenn Sie Webpack verwenden, lesen Sie hier weiter:

Befehlszeile im Projektordner, in dem sich Ihre vorhandene package.json befindet: npm install node-sass sass-loader raw-loader --save-dev

In webpack.common.js, nach „Regeln“ und fügen Sie diese Aufgabe bis zum Ende der Regel Array (vergessen Sie nicht ein Komma an das Ende des vorherigen Objekts hinzugefügt werden ):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Dann in Ihrer Komponente:

@Component({
  styleUrls: ['./filename.scss'],
})

Wenn Sie globale CSS-Unterstützung wünschen, entfernen Sie auf der obersten Komponente (wahrscheinlich app.component.ts) die Kapselung und fügen Sie das SCSS hinzu:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

von Angular Starter hier .

Alireza
quelle
5

ng set --global defaults.styleExt=scssist seit ng6 veraltet. Sie erhalten folgende Nachricht:

get / set wurde zugunsten des Befehls config veraltet

Du solltest benutzen:

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

Wenn Sie auf ein bestimmtes Projekt abzielen möchten (ersetzen Sie {project} durch den Namen Ihres Projekts):

ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'
aloisdg wechselt zu codidact.com
quelle
Bezogen auf Keine Konfiguration gefunden oder get / set wurden in Winkel 6
aloisdg verlegt, das zu codidact.com
3

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

  1. Benennen Sie alle CSS-Dateien in SCSS um und aktualisieren Sie die Komponenten, die auf sie verweisen.
  2. Fügen Sie dem Schlüssel "schematics" von angle.json (normalerweise Zeile 11) Folgendes hinzu:

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

Edodso2
quelle
3

Aktualisieren Sie für Angular 9.0 und höher das "schematics":{}Objekt in der Datei angle.json wie folgt :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}
Mahozad
quelle
Warum??? Warum unterhalten sie sich immer wieder?
fedor.belov
Danke, ich habe mich gefragt, warum es nicht funktioniert hat und es stellte sich heraus, dass sie es in stylejetzt umbenannt haben
Dino
2

Folgendes sollte in einem eckigen CLI 6-Projekt funktionieren. Dh wenn Sie bekommen:

get / set wurde zugunsten des Befehls config veraltet.

npm install node-sass --save-dev

Dann (stellen Sie sicher, dass Sie den Projektnamen ändern )

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

Um Ihren Standardprojektnamen zu erhalten, verwenden Sie:

ng config defaultProject

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:

Ungültiges JSON-Zeichen: "s" bei 0: 0

Daher ist eine manuelle Bearbeitung angular.jsonerforderlich.

Sie möchten, dass es ungefähr so ​​aussieht (beachten Sie die styleex-Eigenschaft):

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

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.

Neil Watson
quelle
2

Am 10.03.2019 ließ Anguar die Unterstützung von Sass fallen. Unabhängig davon, an welche Option Sie --stylebeim Ausführen übergeben haben ng new, werden immer .scssDateien generiert. Es ist eine Schande, dass die Sass-Unterstützung ohne jede Erklärung eingestellt wurde.

Nur ein Lernender
quelle
1
Für alle, die nach dem 10.03.2019 damit zu kämpfen haben: Angular hat die Sass-Unterstützung für Angular-Cli in 8.0.0-Beta.5 wieder eingeführt und sollte bald wieder in der Hauptversion sein. Sie können die Vorabversion mitnpm install -g @angular/[email protected]
mkrl
Interessant. Danke, für die Erinnerung. Wissen Sie aus Neugier, warum sie die Unterstützung überhaupt einstellen?
Nur ein Lernender
Anscheinend hat das Angular-Team es als "nicht mehr relevante" Syntax bezeichnet, zumindest wurde dies in dieser PR vom Kernteammitglied angegeben und konnte keine weiteren Informationen dazu finden.
mkrl
1

Legen Sie es als globalen Standard fest

ng set defaults.styleExt=scss --global

Sajith Mantharath
quelle
0

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:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

Beim Generieren eines neuen Projekts können Sie auch festlegen, welche Erweiterung für Stildateien gewünscht wird:

ng new sassy-project --style=sass

Oder legen Sie den Standardstil für ein vorhandenes Projekt fest:

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

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

Victor Hugo Arango A.
quelle
0

Ich habe versucht, mein Projekt mit diesem Befehl zu aktualisieren, um den sass zu verwenden

ng set defaults.styleExt scss

aber habe das

get / set wurde zugunsten des Befehls config veraltet.

  • Angular CLI: 6.0.7
  • Knoten: 8.9.0
  • Betriebssystem: Linux x64
  • Winkel: 6.0.3

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

ng neue my-sassy-app --style = scss

Aber ich würde mich freuen, wenn jemand einen Weg teilen könnte, das bestehende Projekt zu aktualisieren, da dies nett wäre.

Junaid
quelle
Jemand hat dies für bestehende Angular 6-Projekte hier
Padigan
0

Schritt 1. Installieren Sie das Bulma-Paket mit npm

npm install --save bulma

Schritt 2. Öffnen Sie angle.json und aktualisieren Sie den folgenden Code

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

Das ist es.

Fügen Sie stylePreprocessorOptions zu angle.json hinzu, um Bulmas Tools einfach verfügbar zu machen.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + WINKEL 6

BALA
quelle
Das ist völlig anders als der Winkelstandard, und die Verwendung von scss ist nur ein sekundärer Effekt der Verwendung von bulma
netalex