Angular-cli: Livereload after Sass (.scss) file change

Created on 18 May 2016  路  11Comments  路  Source: angular/angular-cli

  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:

4.

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.

2 (required) bufix

Most helpful comment

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

All 11 comments

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

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

@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.

Same here. Any workarounds?

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

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

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.

Already fixed?

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,

Closed as this issue was made obsolete by https://github.com/angular/angular-cli/pull/1455.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rajjejosefsson picture rajjejosefsson  路  3Comments

gotschmarcel picture gotschmarcel  路  3Comments

donaldallen picture donaldallen  路  3Comments

rwillmer picture rwillmer  路  3Comments

brtnshrdr picture brtnshrdr  路  3Comments