# Hot reloading css reloads complete page

**URL:** <https://discuss.emberjs.com/t/hot-reloading-css-reloads-complete-page/10729>\
**Category:** Ember CLI\
**Created:** [May 20, 2016, 3:46pm UTC](https://discuss.emberjs.com/t/hot-reloading-css-reloads-complete-page/10729 "2016-05-20T15:46:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![casio](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/casio/32/12312_2.png) [@casio](https://discuss.emberjs.com/u/casio)\
**Post date:** [May 20, 2016, 3:46pm UTC](https://discuss.emberjs.com/t/hot-reloading-css-reloads-complete-page/10729/1 "2016-05-20T15:46:54Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![raelbr](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/raelbr/32/12304_2.png) [@raelbr](https://discuss.emberjs.com/u/raelbr)\
**Post date:** [May 20, 2016, 6:12pm UTC](https://discuss.emberjs.com/t/hot-reloading-css-reloads-complete-page/10729/2 "2016-05-20T18:12:30Z")

</div>

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: [https://chrome.google.com/webstore/detail/livepage/pilnojpmdoofaelbinaeodfpjheijkbh](https://chrome.google.com/webstore/detail/livepage/pilnojpmdoofaelbinaeodfpjheijkbh)

---

<div class="post-metadata">

**Author:** ![ChrizzDF](https://avatars.discourse-cdn.com/v4/letter/c/aca169/32.png) [@ChrizzDF](https://discuss.emberjs.com/u/ChrizzDF)\
**Post date:** [May 20, 2016, 8:48pm UTC](https://discuss.emberjs.com/t/hot-reloading-css-reloads-complete-page/10729/3 "2016-05-20T20:48:04Z")

</div>

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 😃

---

<div class="post-metadata">

**Author:** ![casio](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/casio/32/12312_2.png) [@casio](https://discuss.emberjs.com/u/casio)\
**Post date:** [May 23, 2016, 11:23am UTC](https://discuss.emberjs.com/t/hot-reloading-css-reloads-complete-page/10729/4 "2016-05-23T11:23:09Z")

</div>

> run sass & postcss … same time

Hehe, that’s exactly what I’m up for 😄

I tried `ember-cli-css-preprocess` for doing so, but ran into [this problem](https://github.com/n1ru4l/ember-cli-css-preprocess/issues/21) - 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 😉

Thanks for help!

---

<div class="post-metadata">

**Author:** ![casio](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/casio/32/12312_2.png) [@casio](https://discuss.emberjs.com/u/casio)\
**Post date:** [May 23, 2016, 11:24am UTC](https://discuss.emberjs.com/t/hot-reloading-css-reloads-complete-page/10729/5 "2016-05-23T11:24:25Z")

</div>

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