scss - Come faccio ad aggiungere la compilation Sass in Angular CLI 6: angular.json?




set scss angular 6 (2)

Ho appena creato un nuovo progetto Angular usando la nuova Angular CLI 6.0, ma devo aggiungere la compilation Sass al mio progetto. Sono consapevole che puoi creare un flag quando crei un progetto, ma il mio progetto è già stato creato e il lavoro è stato completato.

Il nuovo file di configurazione che viene generato con la nuova angular.json riga di angular.json Angular è ora chiamato angular.json anziché angular-cli.json . Anche lo schema per il file è diverso, con nuove proprietà.

Nel vecchio angular-cli.json c'è una sezione in cui puoi impostare lo stylExt modo,

"defaults": {
    "styleExt": "scss"
}

ma non sono sicuro di dove mettere esattamente questo, come dopo le proprietà "test" e "lint" , dà un errore di lanugine di:

Matches multiple schemas when only one must validate.

e l'edificio produce:

Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt).

Guardando i documenti della CLI non vedo nulla che indichi dove mettere "styleExt" .

Ho visto altre risposte che mi consigliano: ng set defaults.styleExt scss che genera get/set have been deprecated in favor of the config command. .

Ho provato ng config set defaults.styleExt scss e npm config set defaults.styleExt scss con il primo che npm config set defaults.styleExt scss un errore e il secondo apparentemente non ha alcun effetto sul file, ma senza errori.


Facendo esattamente ciò che Smokey Dawson ha commentato ,

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

Quanto sopra è il risultato. Quindi nella tua app, sotto gli schematics chiave, aggiungi un componente chiave @schematics/angular:component styleext @schematics/angular:component con lo stile chiave impostato su scss .

Questo dovrebbe essere applicato al tuo file angular.json nella directory principale del tuo progetto.


In Angular 6, è più facile di così. La compilation viene gestita automaticamente! Come? Per usare scss a livello di componenti è necessario nominare il file con l'estensione scss (lo stesso vale per less, styl ). E in component.ts cambi anche lo stile corrispondente in scss .

Ecco uno screenshot dal documento:

E per usare Scss su scala globale (src / styles.css), devi cambiare styles.css in styles.scss (lo stesso vale per meno, styl ... ecc.). E poi vai su angular.json e cambi il vecchio styles.css nel nuovo valore styles.scss. Come mostrato nell'immagine qui sotto:

Ecco il link per il documento per la prima parte per quelli che vogliono esplorare se stessi: https://angular.io/guide/component-styles#non-css-style-files

Ora per quanto riguarda l'impostazione, ng-cli, quindi quando si genera un nuovo componente l'estensione sarà di default scss? Utilizzare il comando ng config come segue:

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

Questo aggiornerà angular.json con:

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

Qual è l'equivalente del vecchio angular-cli.json

    defaults: {
        "styleext": "scss"
    }

Questo è per un progetto che è già stato avviato ma non impostato come predefinito su scss. Se stai creando un nuovo progetto, usa l'opzione --style per specificarlo come segue:

ng new my-project --style=scss

E non dovrai usare il comando precedente che è un comando di configurazione che ci consente di aggiornare il campo specificato nel file angular.json (perché sarà già impostato).





angular-cli