Angular-cli: Method to refresh compiled global css from scss like livereload/browsersync

[smlombardi]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x ] feature request

Versions.

@angular/cli: 1.4.2
node: 6.11.2
os: darwin x64
US-ST016LO-MLT:des

Desired functionality.

Our projects use a global scss file. We need to have source maps to debug sass as we work, so currently we run ng serve --sourcemap --extractCss -o --hmr -e=hmr. When editing a scss file, the css is compiled but the browser is not refreshed with the changes.

So, sometimes I will run the app without HMR just to force a reload on every save: ng serve --sourcemap --extractCss -o.

However, it would be preferable to have the CSS changes injected like the JS is with HMR. In older projects we used Gulp and Browsersync, which would inject css changes without reloading the browser.

I have searched and searched on this, and many issues request this for SCSS in components which, while nice, is more than we require; just getting this for global scss/css file would be huge.

I don't see this on any roadmaps anywhere. Is something like this being worked on?

[kyr0]

Today I ran into this as well..., not so cool that it doesn't reload at all when HMR is enabled together with extractCss. Since we are refactoring from global styles to component styles right now, we would like to check changes side-by-side in an HMR way (including SCSS global styles source maps support).

[shyamal890]

+1 @Brocco would appreciate your thoughts on this.

[SystemR]

Global style injection seems to work if you omit the --extractCss flag

[smlombardi]

@SystemR But then source maps don't work

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot[bot]]

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._}