1

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?

Improve this question
2
  • change this to ./src/app/app.component.scss instead of ./src/app/app.component.sass Commented Oct 13, 2017 at 17:25
  • you can also do opposite ng new myproject --style=scss by defining scss not sass Commented Oct 13, 2017 at 17:49

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Oh, I might have installed sass when I wanted to install scss :( If there a way of changing cli to generate scss instead of sass or do I need to create a new project again?
Sure, I edited my answer with that a few minutes ago, just edit the .angular-cli.json file, I think that should be enought.
No need to worry about installing new engine for scss, as its the same as for sass (sass is just a different syntax for it).