Error compiling Sass in Angular CLI

1
votes

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

2
sassangular-cli
are you using it in your component css property or like a global css - Rahul Singh

2 Answers

1
votes

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
0
votes

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