Javascriptの角4 CLI SCSSの問題は後に、私はちょうど私がそうSCSSでそれを生成し<p></p> Angualr 4.のための角度CLIを使用して、新しい角度プロジェクトを作成したCSS

Question

を追加しましたsass

私はいくつかのCSSを追加するまで、すべてがうまくコンパイルされます。例えば

私は

.test { 
    padding: 20px; 
} 

とすぐ、私はこのエラーを取得し保存するとapp.component.scssするためにこれを追加しました：

はコンパイルに失敗しました。

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

私は間違っていますか？

Answer 1

SASSとSCSSの2つのものが混在しています。

SASSの構文：

.test 
    padding: 20px 

SCSS構文：

.test { 
    padding: 20px; 
} 

はapp.component.scssにファイルの名前を変更してみて、それが動作するはずです。

（プロジェクトのルートに）あなたの.angular-cli.jsonファイルでそれを更新し、あなたの角度CLIプロジェクトでデフォルトとしてSCSSを使用するには：

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

それとも、ng set defaults.styleExt scssを使用することができます。