Angular 4 CLI ng build no converting scss to css

Question

When I run ng build , the generated dist folder doesn't convert scss files to css .

I have a main.scss in my assets folder and .angular-cli.json has:

"styles": [
        "assets/scss/main.scss"
 ],

.....

"styleExt": "scss",

Answer 1

You can do ng new myApp --style=scss

Then Angular CLI will create any new component with scss for you...

You also need to use node-sass , install it like this:

npm install node-sass --save-dev

You also need to change styleExt in angular-cli.json to sass ...

and use sassCompiler in angular-cli-build.js like this:

sassCompiler: {
    includePaths: [
      'src/app/scss' //here add scss
    ]
 }

and you should be good to go!

for more info visit here .

Answer 2

The content of the assets folder isn't changed by angular. Move it to the /app folder and change .angular-cli.json to.

"styles": [
   "main.scss"
 ],