Angular-cli da css a scss

135

Ho letto la documentazione , che dice che se voglio usare scssdevo eseguire il seguente comando:

ng set defaults.styleExt scss

Ma quando lo faccio e creo quel file, ricevo ancora questo errore nella mia console:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

— Jamie
fonte

1

Funzionerà solo per i file generati da quel punto, non credo che risolverà quelli che hai già. Se git diffvedrai cosa è cambiato.

— jonrsharpe,

Ma non ho ancora file. Voglio solo cambiare.

— Jamie,

come non hai ancora nessun file? Se stai creando un nuovo progetto, perché lo stai configurando in questo modo?

— jonrsharpe,

Ho appena iniziato con angular2. Sto cercando di capire tutto.

— Jamie,

1

Se stai creando un nuovo progetto, fai ng new whatever --style=scss come mostrato nei documenti . Non seguire le istruzioni per configurare un progetto esistente se non è quello che stai facendo!

— jonrsharpe,

267

Per Angular 6 consultare la documentazione ufficiale

Nota: per @angular/cliversioni precedenti 6.0.0-beta.6all'utilizzo ng setal posto di ng config.

Per progetti esistenti

In un progetto angular-cli esistente che è stato impostato con gli cssstili predefiniti dovrai fare alcune cose:

Cambia l'estensione di stile predefinita in scss

Cambia manualmente in .angular-cli.json(Angular 5.xe precedenti) o angular.json(Angular 6+) o esegui:
ng config defaults.styleExt=scss

se ricevi un errore: Value cannot be found.usa il comando:

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

(* fonte: opzioni Angular CLI SASS )

Rinomina i tuoi .cssfile esistenti in .scss(es. Styles.css e app / app.component.css)
Punta la CLI per trovare styles.scss

Modifica manualmente le estensioni dei file in apps[0].stylesinangular.json

Punta i componenti per trovare i tuoi nuovi file di stile

Modifica il styleUrlsnei componenti in modo che corrispondano ai nuovi nomi di file

Per progetti futuri

Come accennato da @Serginho, è possibile impostare l'estensione di stile quando si esegue il ng newcomando

ng new your-project-name --style=scss

Se si desidera impostare il valore predefinito per tutti i progetti creati in futuro, eseguire il comando seguente:

ng config --global defaults.styleExt=scss

— elegante
fonte

6

EDIT: avevo solo bisogno di aggiornare il builder in tempo reale. Funziona correttamente

— Cristian Traìna,

1

@ angular / cli 1.7.3: cambiando defaults.styleExt da cssa scssin .angular-cli.jsonsi creeranno automaticamente i file scss per ogni nuovo componente generato in futuro.

— SimonHawesome

4

set defaults.styleExt scss per progetti esistenti

— smedasn

9

per angular 6 segui questo github.com/angular/angular-cli/wiki/stories-css-preprocessors

— hamilton.lima

22

@chovy per l'ultima versione di cli angolare, nel mio caso (6.0.7) utilizzare questo comando per progetti esistenti: ng config schematics.@schematics/angular:component.styleext scss come raccontato da @ hamilton.lima

— Farhan il

52

A partire da ng6 questo può essere realizzato con il seguente codice aggiunto a angular.jsonlivello di root:

Cambia manualmente in .angular.json:

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

— Jose Orihuela
fonte

Non sono schematicsal livello di root ma ho nidificato all'interno del mio progetto in angular.json. Dovrei ignorarlo e aggiungerlo invece a livello di root?

— mcheah,

1

@mcheah, sì, è così che anche il mio è installato e funziona.

— Eric Soyke,

Ho lasciato il mio nidificato all'interno del progetto e sembra che funzioni anche bene, proprio come una FYI per chiunque abbia la stessa domanda.

— Sì,

Dopo l'aggiornamento alle ultime versioni di ng6, anche il mio schematicsè ora nidificato.

— Jose Orihuela,

Questo non sembra cambiare nulla per me. Non sto ancora elaborando le regole scss nei file .css.

— Chovy

34

Apri il file angular.json

1.cambia da

"schematics": {}

per

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

cambio da (in due punti)

"src/styles.css"

per

"src/styles.scss"

quindi controlla e rinomina tutti i .cssfile e aggiorna i file component.ts styleUrls da.css to .scss

— BALA
fonte

4

Il passaggio 1 può essere eseguito dall'interfaccia della riga di comando: ng config schematics.@schematics/angular:component.styleext scss come specificato nei documenti ufficiali: github.com/angular/angular-cli/wiki/stories-css-preprocessors

— Marian07

13

Per Angular 6,

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

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

— Franklin Pious
fonte

11

Integrazione con preprocessore CSS per CLI angolare: 6.0.3

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

Documentazione CLI angolare per tutti i principali preprocessori CSS

— Angel Roma
fonte

1

Invalid JSON character: "s" at 0:0.

— Chovy

A partire dal angolare CLI 6.0.8 ng config(come sopra) è il metodo migliore, ma è comunque necessario rinominare *.cssi file *.scsse sostituire i riferimenti in angular.jsona style.csscon style.scsse aggiornare tutti i riferimenti ai file dei componenti nella styleUrlsproprietà per i nuovi nomi. ... allora funziona alla grande!

— gkl

8

Per progetti esistenti :

Nel angular.jsonfile

In buildparte e in testparte, sostituire:

"styles": ["src/styles.css"], di "styles": ["src/styles.scss"],
Sostituire:

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

L'uso del ng config schematics.@schematics/angular:component.styleext scsscomando funziona ma non posiziona la configurazione nello stesso posto.

Nel progetto rinominare i .cssfile in.scss

Per un nuovo progetto , questo comando fa tutto il lavoro:

ng n project-name --style=scss

Per la configurazione globale

Le nuove versioni sembrano non avere un comando globale

— veben
fonte

6

Usa il comando:

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

— himanshu sharma
fonte

3

In ng6 devi usare questo comando, secondo un post simile :

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

— Jameson Saunders
fonte

3

Per gli utenti delle estensioni Nrwl che si imbattono in questo thread: tutti i comandi vengono intercettati da Nx (ad esempio, ng generate component myCompent) e quindi passati ad AngularCLI.

Il comando per far funzionare SCSS in uno spazio di lavoro Nx:

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

— TILO
fonte

Fantastico, lo cercavo. Grazie!

— Ruan Petersen,

2

È possibile applicare un cambio di forza bruta. Questo funzionerà per cambiare, ma è un processo più lungo.

Vai alla cartella app src / app

Apri questo file: app.component.ts
Cambia questo codice styleUrls: ['./app.component.css']instyleUrls: ['./app.component.scss']
Salva e chiudi.

Nella stessa cartella src / app

Rinominare l'estensione per il file app.component.css in (app.component.scss)
Segui questa modifica per tutti gli altri componenti. (es. casa, informazioni, contatti, ecc ...)

Il file di configurazione angular.json è il prossimo. Si trova nella radice del progetto.

Cerca e sostituisci il CSS cambiarlo in (scss) .
Salva e chiudi.

Infine, riavvia il tuo ng serve -o.

Se il compilatore si lamenta con te, ripassa i passaggi.

Assicurati di seguire attentamente i passaggi in app / src .

— Frank Thoeny
fonte

1

Nell'ultima versione di Angular (v9), è necessario aggiungere il codice seguente angular.json

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

Potrebbe essere aggiunto usando il seguente comando:

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

— Partha Ranjan
fonte

non funziona per me e sto cercando di farlo più di 10

— Kross