Livereload after Sass (.scss) file change

[samuel-kollat]

1. OS - Windows 10
2. Node version: 5.7.1
3. I installed node-sass (version 3.7.0), renamed test-project.component.css to test-project.component.scss and filled it with:

h1 {
  color: blue;
}

After running ng s everything is allright. But any change to .scss file (e.g. color: red;) does not update/reaload a page despite succesful build:

file added app\test-project.component.scss___jb_tmp___
file changed app\test-project.component.scss___jb_tmp___
file deleted app\test-project.component.scss
file added app\test-project.component.scss___jb_old___
file deleted app\test-project.component.scss___jb_tmp___
file added app\test-project.component.scss
file deleted app\test-project.component.scss___jb_old___

Build successful - 407ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
vendor                                        | 327ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
vendor (1)                                    | 327ms
Funnel (9)                                    | 34ms (3 ms)

Preferably it would be great if a page ptyles were updated without full page reload.

[un33k]

It is not working for .css either.

$ ng new foobar
$ npm install
$ ng serve

goto: http://localhost:4200
see: foobar works!

modify & save: app/foobar.component.css
noticed: no reload

$ ng -v
angular-cli: 1.0.0-beta.4
node: 5.11.1
os: darwin x64

[daco]

I've got the same problem.
angular-cli: 1.0.0-beta.5
node: 4.4.2
os: darwin x64

[monojack]

@un33k

It is not working for .css either.

this is not related. I am able to reproduce the css bug, but editing any scss file still reloads the page for me.

[cescoferraro]

Same here. Any workarounds?

[sendilkumarn]

livereload.js is looking for an import (rel=stylesheet) / style / link property, since we haven't used <app_name>.component.css anywhere, the reload returns false on check.

we can either change it temporarily / suggest a fix at livereload.js

[developer-hosny]

temporary solution for css only
you can rename app.component.css to app.component.css.html and change in component to new file name styleUrls: ['app.component.css.html'] and change language mode in you IED to CSS.

[masaanli]

Already fixed?

[Blasz]

Is there any workarounds for this besides changing the css files to HTML?

Hi people,

Anybody knows if this issue has already a fix or if the fix was added for a future angular-cli build?

thanks,