Javascript angulaire 4 CLI question SCSS après ajouté

Question

Je css viens de créer un nouveau projet angulaire à l'aide de la CLI angulaire pour Angualr 4.

Je l'ai généré avec SCSS donc:

ng = nouveau myproject --style sass

Tout se compile bien jusqu'à ce que j'ajoute quelques css.

Par exemple, je l'a ajouté à app.component.scss

.test { 
    padding: 20px; 
} 

Et dès que je sauve je reçois cette erreur:

Impossible de compiler.

./src/app/app.component.sass 
Module build failed: 
.test { 
    ^
     Invalid CSS after ".test {": expected "}", was "{" 
     in C:\Users\me\Documents\myproject\src\app\app.component.sass (line 1, column 8) 
@ ./src/app/app.component.ts 18:17-48 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts 

Ce que je suis-je tort?

Answer 1

Vous mélangez deux choses: SASS et SCSS.

syntaxe SASS:

.test 
    padding: 20px 

syntaxe SCSS:

.test { 
    padding: 20px; 
} 

Renommez le fichier à app.component.scss et cela devrait fonctionner.

Pour utiliser SCSS par défaut avec votre projet angulaire CLI, mettez à jour dans votre fichier .angular-cli.json (dans la racine de votre projet):

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

Ou vous pouvez utiliser ng set defaults.styleExt scss.