Hot reloading css reloads complete page


#1

Hey there,

I have a problem with my project setup: changes to .scss files cause a reload of the complete page, instead of only hot reloading the styles.

In blank test projects using the same ember cli & sass version this is working nicely and I cant seem to find out what causing this in my setup. Does anybody have an idea?

Thanks for any pointer! Carsten

node 5.8.0
ember 2.5.1
ember-data 2.5.2
ember-cli-sass ^5.3.1

#2

I currently have my live-reload disabled and i have installed the Live Page plugin for Chrome to live-reload the CSS file… The good thing about this plugin is that it doesn’t reload the whole page… It only refresh the CSS file… And it also can live-reload with .js updates.

Here’s the plugin URL:


#3

Hey there, today I also had a similar problem when I was trying to run sass and postcss preprocessors at the same time. Try to remove your bower_components & node_modules folder and install your dependencies again, assuming you didn’t do this yet :smiley:


#4

run sass & postcss … same time

Hehe, that’s exactly what I’m up for :smile:

I tried ember-cli-css-preprocess for doing so, but ran into this problem - fix seems on the way in the develop branch.

How did you achieve compiling both sass & postcss, if you mind sharing?

Try to remove…

Yea, I did remove node_modules & bower_components, installed stuff again, but I still got a complete reload on scss changes . /

After further checking it seems I now found the culprit:

I was using ember-cli-svgstore and had placed svg icons in app/styles/icons. When I just comment out the svgstore option in ember-cli-build I now have css hot reloading again, finally. Phew, what a nice ride. Not :wink:

Thanks for help!


#5

Thanks @raelbr, pragmatic way when ember-cli goes (reload) crazy! : )