Sono nuovo di Angular e vengo dalla comunità di Ember. Tentativo di utilizzare la nuova Angular-CLI basata su Ember-CLI.

Devo conoscere il modo migliore per gestire SASS in un nuovo progetto angolare. Ho provato ad usare il ember-cli-sassrepository per vedere se avrebbe funzionato dal momento che un certo numero di componenti principali di Angular-CLI sono stati eliminati dai moduli Ember-CLI.

Non ha funzionato ma, di nuovo, non sono sicuro di aver semplicemente configurato male qualcosa.

Inoltre, qual è il modo migliore per organizzare gli stili in un nuovo progetto angolare? Sarebbe bello avere il file sass nella stessa cartella del componente.

La versione 9 della CLI angolare (utilizzata per creare progetti Angular 9) ora riprende styledagli schemi anziché styleext. Usa il comando in questo modo:
ng config schematics.@schematics/angular:component.style scss
e il risultante angular.json dovrebbe apparire così

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

Altre possibili soluzioni e spiegazioni:

per creare un nuovo progetto con CLI angolare con supporto sass, provare questo:

ng new My_New_Project --style=scss 

Puoi anche usare --style=sasse se non conosci la differenza, leggi questo breve e facile articolo e se ancora non lo sai, vai scsse continua a imparare.

Se hai un progetto angolare 5, usa questo comando per aggiornare la configurazione per il tuo progetto.

ng set defaults.styleExt scss

Per le ultime versioni

Per Angular 6 per impostare un nuovo stile su un progetto esistente con CLI:

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

O direttamente in angular.json:

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

Aggiornamento per Angular 6+

1. Nuovi progetti

   Quando si genera un nuovo progetto con CLI angolare, specificare il pre-processore css come

   • Usa la sintassi SCSS

     ng new sassy-project --style=scss
     

   • Usa la sintassi SASS

     ng new sassy-project --style=sass
     

2. Aggiornamento del progetto esistente

   Impostare lo stile predefinito su un progetto esistente eseguendo

   • Usa la sintassi SCSS

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

   • Usa la sintassi SASS

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

   Il comando sopra aggiornerà il tuo file di lavoro (angular.json) con

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

   dove styleextpuò essere scsso sasssecondo la scelta.

Risposta originale (per Angolare <6)

Nuovi progetti

Per i nuovi progetti possiamo impostare le opzioni --style=sasso in --style=scssbase al sapore desiderato SASS / SCSS

• Usa la sintassi SASS

  ng new project --style=sass 
  

• Usa la sintassi SCSS

  ng new project --style=scss 
  

quindi installare node-sass,

npm install node-sass --save-dev

Aggiornamento di progetti esistenti

Per angular-clicompilare file sass con node-sass, ho dovuto eseguire,

npm install node-sass --save-dev 

che installa node-sass. Poi

• per la sintassi SASS

  ng set defaults.styleExt sass
  

• per la sintassi SCSS

  ng set defaults.styleExt scss
  

per impostare lo stile predefinito predefinito su sass

(o)

passare styleExta sasso scssper la sintassi desiderata in .angular-cli.json,

• per la sintassi SASS

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

• per la sintassi SCSS

  "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 

che è stato risolto cambiando le linee di .angular-cli.json,

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

per entrambi,

• per la sintassi SASS

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

• per la sintassi SCSS

  "styles": [
          "styles.scss"
        ],
  

Citato dal repository github di Official qui -

Per usarne uno basta installarlo per esempio

npm install node-sass

e rinominare i file .css nel progetto in .scss o .sass. Saranno compilati automaticamente. L'argomento delle opzioni di Angular2App ha le opzioni sassCompiler, lessCompiler, stylusCompiler e compassCompiler che vengono passate direttamente ai rispettivi preprocessori CSS.

Vedere qui

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

Di 'ad angular-cli di usare sempre scss di default

Per evitare il passaggio --style scssogni volta che si genera un progetto, è possibile che si desideri regolare la configurazione predefinita di angular-cli a livello globale, con il seguente comando:

ng set --global defaults.styleExt scss

Nota che alcune versioni di angular-cli contengono un bug con la lettura del flag globale sopra ( vedi link ). Se la tua versione contiene questo bug, genera il tuo progetto con:

ng new some_project_name --style=scss

Come ha detto Mertcan, il modo migliore per usare scss è creare il progetto con quell'opzione:

ng new My_New_Project --style=scss 

Angular-cli aggiunge anche un'opzione per modificare il preprocessore css predefinito dopo che il progetto è stato creato usando il comando:

ng set defaults.styleExt scss

Per maggiori informazioni puoi consultare qui la loro documentazione:

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

Ho notato un gotcha molto ansioso nel passaggio ai file scss !!! Uno DEVE passare da un semplice: styleUrls: ['app.component.scss']a styleUrls: ['./app.component.scss'](aggiungere ./) inapp.component.ts

Cosa succede quando si genera un nuovo progetto, ma apparentemente non quando viene creato il progetto predefinito. Se vedi errori di risoluzione durante la creazione di ng, controlla questo problema. Mi ci è voluto solo ~ 1 ora.

Il migliore potrebbe essere ng new myApp --style=scss

Quindi la CLI angolare creerà qualsiasi nuovo componente con scss per te ...

Si noti che l'utilizzo scssnon funziona nel browser come probabilmente sapete .. quindi abbiamo bisogno di qualcosa per compilarlo css, per questo motivo possiamo usarlo node-sass, installarlo come di seguito:

npm install node-sass --save-dev

e dovresti essere bravo ad andare!

Se usi il webpack, continua a leggere qui:

Riga di comando all'interno della cartella del progetto in cui package.json esistente è: npm install node-sass sass-loader raw-loader --save-dev

In webpack.common.js, cerca "regole:" e aggiungi questo oggetto alla fine dell'array di regole (non dimenticare di aggiungere una virgola alla fine dell'oggetto precedente):

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

Quindi nel tuo componente:

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

Se si desidera il supporto CSS globale, sul componente di livello superiore (probabilmente app.component.ts) rimuovere l'incapsulamento e includere SCSS:

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

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

dall'antipasto angolare qui .

ng set --global defaults.styleExt=scssè obsoleto da ng6. Riceverai questo messaggio:

get / set sono stati deprecati a favore del comando config

Dovresti usare:

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

Se vuoi scegliere come target un progetto specifico (sostituisci {project} con il nome del tuo progetto):

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

Angular-CLI è il metodo raccomandato ed è lo standard nella comunità Angular 2+.

Creta un nuovo progetto con SCSS

ng new My-New-Project --style=sass

Converti un progetto esistente (CLI inferiore a v6)

ng set defaults.styleExt scss

(è necessario rinominare manualmente tutti i file .css con questo approccio, non dimenticare di rinominare i file dei componenti)

Converti un progetto esistente (CLI maggiore di v6)

1. rinominare tutti i file CSS in SCSS e aggiornare i componenti che li fanno riferimento.
2. aggiungi quanto segue al tasto "schematics" di angular.json (di solito la riga 11):

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

Per Angular 9.0 e versioni successive, aggiorna l' "schematics":{}oggetto nel file angular.json in questo modo:

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

Quanto segue dovrebbe funzionare in un progetto CLI 6 angolare. Cioè se stai ricevendo:

get / set sono stati deprecati a favore del comando config.

npm install node-sass --save-dev

Quindi ( assicurandoti di cambiare il nome del progetto )

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

Per ottenere il nome del progetto predefinito utilizzare:

ng config defaultProject

Tuttavia: se il progetto è stato migrato da <6 a 6 angolare, è probabile che la configurazione non sia presente. Nel qual caso potresti ottenere:

Carattere JSON non valido: "s" a 0: 0

Pertanto angular.jsonsarà necessaria una modifica manuale di .

Avrai bisogno che assomigli a qualcosa del genere (prendendo nota della proprietà styleex):

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

Mi sembra uno schema troppo complesso. _ (ツ) _ / ¯

Ora dovrai andare e cambiare tutti i tuoi file css / less in scss e aggiornare tutti i riferimenti nei componenti ecc., Ma dovresti essere a posto.

Al 3/10/2019, Anguar ha abbandonato il supporto di sass. Non importa quale opzione hai passato --styledurante l'esecuzione ng new, ottieni sempre .scssfile generati. È un peccato che il supporto di Sass sia stato abbandonato senza alcuna spiegazione.

Impostalo come Global Default

ng set defaults.styleExt=scss --global

Integrazione con preprocessore CSS La CLI angolare supporta tutti i principali preprocessori CSS:

Per utilizzare questi preprocessori è sufficiente aggiungere il file agli styleUrl del componente:

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

Quando generi un nuovo progetto puoi anche definire quale estensione desideri per i file di stile:

ng new sassy-project --style=sass

Oppure imposta lo stile predefinito su un progetto esistente:

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

nota: @ schematics / angular è lo schema predefinito per la CLI angolare

Le stringhe di stile aggiunte all'array @ Component.styles devono essere scritte in CSS perché la CLI non può applicare un pre-processore agli stili incorporati.

Basato sulla documentazione angolare https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Ho provato ad aggiornare il mio progetto per usare il sass usando questo comando

set defaults.styleExt scss

ma ho capito

get / set sono stati deprecati a favore del comando config.

• CLI angolare: 6.0.7
• Nodo: 8.9.0
• Sistema operativo: Linux x64
• Angolare: 6.0.3

Così ho cancellato il mio progetto (appena iniziato e non avevo codice nel mio progetto) e ne ho creato uno nuovo con sass inizialmente impostato

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

Ma gradirei se qualcuno potesse condividere un modo per aggiornare il progetto esistente in quanto sarebbe bello.

Passo 1. Installa il pacchetto bulma usando npm

npm install --save bulma

Passo 2. Apri angular.json e aggiorna il seguente codice

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

Questo è tutto.

Per esporre facilmente gli strumenti di Bulma, aggiungi stylePreprocessorOptions a angular.json.

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

BULMA + ANGOLARE 6