Pillole: Come usare SCSS in Angular CLI 6

Configura SCSS per il tuo prossimo progetto Angular.

Se hai familiarità con SCSS in Angular CLI 1.x prima e ora ti stai chiedendo come usarlo nella versione 6, una nuova versione fornita con Angular 6, sono qui per aiutarti.

Sass logo
Il logo di Sass

Ecco come la configurazione dello stile in CLI v1.x è simile al file .angular-cli.json.

"defaults": {
  "styleExt": "scss",
  "component": {}
}

Ma se dai un'occhiata a al file di configurazione angular.json nella versione 6, non troverai più questa configurazione. Ma non preoccuparti, il team di Angular CLI è riuscito a includerla in un modo molto più semplice. Per utilizzare SCSS, è sufficiente importare i file scss (il valore predefinito è src / styles.scss) a livello di progetto in un file angular.json come questo.

{
  ...
  projects: {
    [your_project_name]: {
      ...
      architect: {
        build: {
          ...
          options: {
            styles:{
              "src/styles.scss"
            }
          }
        }
      }
    }
  }
}

Questo è tutto, sei a posto con SCSS! Non sono necessarie altre configurazioni perché il CLI è già configurata, quindi non devi dire al file di configurazione quale CSS-preprocessore verrà usato più. Scavando più a fondo nel loro script di compilazione (node_modules / @ angular-devkit / build-angular / src / angular-cli-files / models / webpack-configs / styles.js), sono abbastanza sicuro che è possibile includere qualsiasi tipo di .css, .sass, .scss, .less o .styl (stylus) e inizia subito la codifica CSS. L'ho provato, molto facile!

Inoltre, forniscono anche il modo di configurare facilmente i browser di destinazione per applicare automaticamente i prefissi. È possibile trovare un elenco di nomi di browser nella cartella src e modificare i browser di destinazione per aggiungere i prefissi desiderati. Non l'ho ancora provato, fammi sapere il risultato se lo hai già provato.

Questo è solo un esempio di un post. L'originale è qui: https://medium.com/@vissanu_s/quick-tip-how-to-use-scss-in-angular-cli-6-63d263b3481c

Did you like it? Why don't you try also...

Quick Tip: How to use SCSS in Angular CLI 6

Configure SCSS for your next Angular project.

How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary.

Build a fantastic Electron app from scratch using create-react-app.

What are and how to use Observables in RxJS

Learn all that you need to know about Observables.