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'(…)

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,

Risposte:


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:

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

  1. Rinomina i tuoi .cssfile esistenti in .scss(es. Styles.css e app / app.component.css)

  2. Punta la CLI per trovare styles.scss

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

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

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


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

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


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


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


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

  1. In buildparte e in testparte, sostituire:

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

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


6

Usa il comando:

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

3

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

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

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


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

  1. Apri questo file: app.component.ts

  2. Cambia questo codice styleUrls: ['./app.component.css']instyleUrls: ['./app.component.scss']

  3. Salva e chiudi.

Nella stessa cartella src / app

  1. Rinominare l'estensione per il file app.component.css in (app.component.scss)

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

  1. Cerca e sostituisci il CSS cambiarlo in (scss) .

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


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

non funziona per me e sto cercando di farlo più di 10
Kross
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.