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",

If this is still an issue, please create a git repo with your app for us to test and update your question. tnx — Dawit
– Dawit, Commented Oct 1, 2017 at 7:07

Alireza · Accepted Answer · 2017-07-03 12:16:29Z

3

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.

edited Jul 3, 2017 at 12:16

answered Jul 3, 2017 at 10:31

Alireza

105k27 gold badges280 silver badges173 bronze badges

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

11 Comments

Nau Parejaa Escamilla Over a year ago

I did this before and nothings happens.

Alireza Over a year ago

did you do npm install node-sass --save-dev ?

Nau Parejaa Escamilla Over a year ago

Yes but still the same

Alireza Over a year ago

Did you change styleExt angular-cli.json ? You need to change styleExt in angular-cli.json to sass, also needs sassCompiler: { includePaths: [ 'src/app/style' // here for sass reference files ]... I add them to the answer

Nau Parejaa Escamilla Over a year ago

StyleExt is equal to sass and still not working. Angular-cli-build.js doesn't appear in my cli version.

|

Alireza · Accepted Answer · 2017-07-03 10:32:06Z

1

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"
 ],

edited Jul 3, 2017 at 10:32

Alireza

105k27 gold badges280 silver badges173 bronze badges

answered Jul 3, 2017 at 10:30

Eduardo Vargas

9,5022 gold badges22 silver badges30 bronze badges

1 Comment

Nau Parejaa Escamilla Over a year ago

I moved the scss container folder from src/assets to src/, and the I changed the styles path but when I build doesn't appear any css file in the dist folder.

Collectives™ on Stack Overflow

Angular 4 CLI ng build no converting scss to css

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related