Error compiling Sass in Angular CLI

Question

For some reason, the angular cli does not compile the sass file. This is my sass file:

/* You can add global styles to this file, and also import other style files */

/* Variáveis */
$bodyColor: #f1f1f1;

body { background: $bodyColor; margin: 0px; }

header{ background-color: #FFF059; width:100%; height: 54px; border-bottom: 1px solid #D9D9D9; }

.logo{ margin-top:4px; }

And this here is the error presented in the console:

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.sass Module build failed: .logo{ margin-top:4px; } ^ Invalid CSS after "...rgin-top:4px; }": expected 1 selector or at-rule, was "{}" in /Users/danielswater/Documents/MercadoLivre/src/styles.sass (line 10, column 26) @ ./src/styles.sass 4:14-187 @ multi ./src/styles.sass

What is wrong? It would be a problem with the angular CLI

are you using it in your component css property or like a global css — Rahul Singh
– Rahul Singh, Commented Aug 3, 2017 at 10:25

Anurag Singh Bisht · Accepted Answer · 2017-08-03 11:48:44Z

1

I have faced similar problem in angular2

First you need to make sure, your .angular-cli.json has .scss as the defaut style extension.

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

Aftet that, I manually installed node-sass and sass-loader which fixed my errors

npm i -D node-sass sass-loader

answered Aug 3, 2017 at 11:48

Anurag Singh Bisht

2,7514 gold badges22 silver badges27 bronze badges

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

Comments

dataphile · Accepted Answer · 2017-11-11 16:01:18Z

-1

You have to include your scss file e.g. 'bootstrap.scss' in your .angular-cli.json file as follows :

"apps": [
{

...

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "styles.css"
],
"scripts": [
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

...

}
]

and then restart your

ng serve

answered Nov 11, 2017 at 16:01

dataphile

3521 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Error compiling Sass in Angular CLI

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related