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.

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"
    }
}

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",
  }
  

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"
        ],
  

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

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

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

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

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.

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 .

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"}'

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" }

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"
  }
}

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.

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.

Legen Sie es als globalen Standard fest

ng set defaults.styleExt=scss --global

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

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.

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