Javascript Angular 4 CLI SCSS issue after added css

Question

I have just created a new angular project using the Angular CLI for Angualr 4.

I generated it with SCSS so:

ng new myproject --style=sass

It all compiles well until I add some css.

For example I added this to app.component.scss

.test {
    padding: 20px;
}

And as soon as I save I get this error:

Failed to compile.

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

What I'm I doing wrong?

change this to ./src/app/app.component.scss instead of ./src/app/app.component.sass — Vignesh
you can also do opposite ng new myproject --style=scss by defining scss not sass — Aniruddha Das

Martin Adámek Martin Adámek · Accepted Answer · 2017-10-13T17:39:01

You are mixing two things: SASS and SCSS.

SASS syntax:

.test
    padding: 20px

SCSS syntax:

.test {
    padding: 20px;
}

Try renaming the file to app.component.scss and it should work.

To use SCSS as default with your angular CLI project, update it in your .angular-cli.json file (in your project root):

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

Or you can use ng set defaults.styleExt scss.

Javascript Angular 4 CLI SCSS issue after added css

1 Answers