web-dev-qa-db-de.com

Angular CLI SASS-Optionen

Ich bin neu in Angular und komme aus der Ember Community. Versuch, die neue Angular-CLI zu verwenden, die auf der Ember-CLI basiert.

Ich muss wissen, wie SASS in einem neuen Angular Projekt am besten gehandhabt werden kann. Ich habe versucht, das Repo ember-cli-sass zu verwenden, um festzustellen, ob es mitspielt, 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 etwas falsch konfiguriert habe.

Wie lassen sich Stile in einem neuen Angular Projekt am besten organisieren? Es wäre schön, die sass-Datei im selben Ordner wie die Komponente zu haben.

angularsassangular-cli
309
JDillon522

Wenn Sie Ihr Projekt mit angular cli erstellen, versuchen Sie Folgendes:

ng new My_New_Project --style=sass

Dies generiert alle Ihre Komponenten mit vordefinierten Sass-Dateien.

Wenn Sie eine SCSS-Syntax wünschen, erstellen Sie Ihr Projekt mit:

ng new My_New_Project --style=scss

Wenn Sie Ihren vorhandenen Stil in Ihrem Projekt ändern

ng set defaults.styleExt scss

Den Rest erledigt Cli.

Für die neuesten Versionen

Für Angular 6, um einen neuen Stil für ein vorhandenes Projekt mit CLI festzulegen:

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

Oder direkt in angular.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}
518
Mertcan Diken

Update für Angular 6+

  1. Neue Projekte

    Wenn mit Angular CLI ein neues Projekt erzeugt , geben Sie den CSS-Präprozessor 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 [email protected]/angular:component.styleext scss
_

    • Verwenden Sie die SASS-Syntax

      _ng config [email protected]/angular:component.styleext sass
_

    Der obige Befehl aktualisiert Ihre Arbeitsbereichsdatei (angular.json) mit

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

    wobei styleext je nach Auswahl entweder scss oder sass sein kann.



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 SASS/SCSS-Geschmack einstellen

  • Verwenden Sie die SASS-Syntax

    _ng new project --style=sass 
_

  • Verwenden Sie die SCSS-Syntax

    _ng new project --style=scss 
_

dann installiere node-sass,

_npm install node-sass --save-dev
_

Aktualisieren vorhandener Projekte

Um angular-cli zum Kompilieren von sass-Dateien mit _node-sass_ zu machen, musste ich ausführen,

_npm install node-sass --save-dev 
_

welches installiert _node-sass_. Dann

  • für SASS-Syntax

    _ng set defaults.styleExt sass
_

  • für SCSS-Syntax

    _ng set defaults.styleExt scss
_

um den standard styleExt auf sass zu setzen

(oder)

ändern Sie styleExt in sass oder scss für die gewünschte Syntax in _.angular-cli.json_,

  • für SASS-Syntax

    _"defaults": {
     "styleExt": "sass",
}
_

  • für SCSS-Syntax

    _"defaults": {
     "styleExt": "scss",
}
_
_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 _.angular-cli.json_ behoben wurde,

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

entweder,

  • für SASS-Syntax

    _"styles": [
        "styles.sass"
      ],
_

  • für SCSS-Syntax

    _"styles": [
        "styles.scss"
      ],
_
335
All Іѕ Vаиітy

Hier zitiert von Officials Github Repo -

Um einen zu benutzen, installieren Sie einfach zum Beispiel

npm install node-sass

und benennen Sie die CSS-Dateien in Ihrem Projekt in .scss oder .sass um. Sie werden automatisch übersetzt. Das options-Argument von Angular2App enthält die Optionen sassCompiler, lessCompiler, stylusCompiler und compassCompiler, die direkt an die jeweiligen CSS-Präprozessoren übergeben werden.

Siehe hier

37
regnar

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

Um zu vermeiden, dass jedes Mal, wenn Sie ein Projekt generieren, --style scss übergeben wird, können Sie die Standardkonfiguration von angle-cli mit dem folgenden Befehl global 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
26
Michael P. Bazos

Wie Mertcan sagte, ist die beste Möglichkeit, scss zu verwenden, das Projekt mit dieser Option zu erstellen:

ng new My_New_Project --style=scss

Angular-cli fügt auch eine Option hinzu, mit der der standardmäßige CSS-Präprozessor geändert werden kann, nachdem das Projekt mit dem folgenden Befehl erstellt wurde:

ng set defaults.styleExt scss

Weitere Informationen finden Sie hier:

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

22
Jared Wadsworth

Ich bemerkte einen sehr nervigen Fehler beim Umstieg auf scss-Dateien !!! Man MUSS sich von einem einfachen bewegen: styleUrls: ['app.component.scss'] zu styleUrls: ['./app.component.scss'] (füge ./ hinzu) in app.component.ts

Was ng tut, wenn Sie ein neues Projekt erstellen, aber anscheinend nicht, wenn das Standardprojekt erstellt wird. Wenn Sie während der Erstellung von ng Lösungsfehler sehen, überprüfen Sie, ob dieses Problem vorliegt. Ich habe nur ca. 1 Stunde gebraucht.

16
JoelParke

Am besten wäre ng new myApp --style=scss

Dann erstellt Angular CLI eine beliebige neue Komponente mit scss für Sie. .

Beachten Sie, dass die Verwendung von scss nicht im Browser funktioniert, wie Sie wahrscheinlich wissen. Daher benötigen wir etwas, um es zu css zu kompilieren. Aus diesem Grund können wir node-sass verwenden. Installieren Sie es wie folgt:

npm install node-sass --save-dev

und du solltest gut gehen!

Wenn Sie ein 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

Suchen Sie in webpack.common.js nach "rules:" und fügen Sie dieses Objekt am Ende des rules-Arrays hinzu (vergessen Sie nicht, ein Komma am Ende des vorherigen Objekts einzufügen):

{
  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 in der Komponente der obersten Ebene (wahrscheinlich app.component.ts) die Kapselung und schließen Sie das SCSS ein:

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

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

von Angular Starter hier .

6
Alireza

ng set --global defaults.styleExt=scss ist seit ng6 veraltet. Sie erhalten diese Nachricht:

get/set wurde zugunsten des Befehls config verworfen

Du solltest benutzen:

ng config [email protected]/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}[email protected]/angular:component '{ styleext: "scss"}'
5
aloisdg

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 bei diesem Ansatz alle CSS-Dateien manuell umbenennen, vergiss nicht, sie in deinen Komponentendateien umzubenennen)


Konvertieren Sie ein vorhandenes Projekt (CLI größer als v6)

  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 angular.json (normalerweise Zeile 11) Folgendes hinzu:

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

4
Edodso2

Mit Wirkung zum 10.03.19 hat Anguar die Unterstützung von sass eingestellt. Unabhängig davon, welche Option Sie bei der Ausführung von --style an ng new übergeben haben, werden immer .scss Dateien generiert. Es ist eine Schande, dass die Sass-Unterstützung ohne Erklärung eingestellt wurde.

2
Just a learner

Das Folgende sollte in einem angular CLI 6-Projekt funktionieren. Wenn Sie bekommen:

get/set wurde zugunsten des Befehls config verworfen.

npm install node-sass --save-dev

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

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

Um Ihren Standardprojektnamen zu erhalten, verwenden Sie:

ng config defaultProject

Allerdings: Wenn Sie Ihr Projekt von <6 auf angular 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 von angular.json erforderlich.

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 scss ändern und alle Referenzen in Komponenten usw. aktualisieren, aber Sie sollten bereit sein.

2
Neil Watson

Legen Sie es als globalen Standard fest

ng set defaults.styleExt=scss --global

1
Sajith Mantharath

CSS-Präprozessor-Integration Angular CLI unterstützt alle gängigen CSS-Präprozessoren:

Um diese Präprozessoren zu verwenden, fügen Sie die Datei einfach 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 Sie für Stildateien benötigen:

ng new sassy-project --style=sass

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

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

hinweis: @ schematics/angular ist das Standardschema für die Angular-CLI

Dem @ Component.styles-Array hinzugefügte Stilzeichenfolgen müssen in CSS geschrieben werden, da die CLI keinen Präprozessor für Inline-Stile anwenden kann.

Basierend auf angular Dokumentation https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

0
Victor Hugo Arango A.

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 angular.json hinzu, um die Tools von Bulma 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 + ANGULAR 6

0
BALA

Ich habe versucht, mein Projekt mit diesem Befehl für die Verwendung des sass zu aktualisieren

ng set defaults.styleExt scss

aber habe das

get/set wurde zugunsten des Befehls config verworfen.

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

Also habe ich mein Projekt gelöscht (da ich gerade angefangen habe und keinen Code in meinem Projekt hatte) und ein neues mit sass erstellt

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

Aber ich würde mich freuen, wenn jemand einen Weg teilen kann, um das bestehende Projekt zu aktualisieren, da das schön wäre.

0
Junaid