# Livereload Ember-CLl; only reload styles

**URL:** <https://discuss.emberjs.com/t/livereload-ember-cll-only-reload-styles/6766>\
**Category:** Ember CLI\
**Created:** [November 21, 2014, 10:25pm UTC](https://discuss.emberjs.com/t/livereload-ember-cll-only-reload-styles/6766 "2014-11-21T22:25:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![typeoneerror](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/typeoneerror/32/9459_2.png) [@typeoneerror](https://discuss.emberjs.com/u/typeoneerror)\
**Post date:** [November 21, 2014, 10:25pm UTC](https://discuss.emberjs.com/t/livereload-ember-cll-only-reload-styles/6766/1 "2014-11-21T22:25:47Z")

</div>

I’m used to building a asset compilation system with Grunt or Gulp. Using Gulp’s livereload and the Chrome livereload plugin, I have a pretty sweet system where it watches for changes of certain files and reloads only those files. With ember-cli, when I change a CSS file, it just reloads the entire page, rather than just reloading the CSS file. This gets to be a pain when I’m trying to style a deeply nested process 😄 Any ideas/thoughts on how to get this working with Ember CLI correctly?

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [November 22, 2014, 6:59am UTC](https://discuss.emberjs.com/t/livereload-ember-cll-only-reload-styles/6766/2 "2014-11-22T06:59:24Z")

</div>

You might be able to hack or configure the broccoli file to only process what you want. Not sure the specifics . You might need to comment out some of it, and setup custom trees to only process your styles.

---

<div class="post-metadata">

**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\
**Post date:** [November 22, 2014, 8:19pm UTC](https://discuss.emberjs.com/t/livereload-ember-cll-only-reload-styles/6766/3 "2014-11-22T20:19:37Z")

</div>

This is currently a limitation from `broccoli`. There is no way to get around it unless you want to mess with `ember-cli` internals.

Just incase you do want to mess it the internals, here’s some hint on what to look for.

`broccoli` is built around 2 key modules: `builder.js` and `watcher.js`. `builder` takes a `broccoli` tree and recursively process each tree node. `watcher` watches source tree for changes and trigger build on the `builder`. For each `readTree` that you call, the `watcher` will add it to the list of things that it will watch.

The `watcher` will emit a `change` event every time a build is triggered and finished. The `change` event will pass along a tree graph that you can use to figure out exactly which subtree was changed and decide what to do with it.

---

<div class="post-metadata">

**Author:** ![mike1234](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mike1234/32/11140_2.png) [@mike1234](https://discuss.emberjs.com/u/mike1234)\
**Post date:** [February 4, 2015, 3:31am UTC](https://discuss.emberjs.com/t/livereload-ember-cll-only-reload-styles/6766/4 "2015-02-04T03:31:54Z")

</div>

While waiting for the issue to be fixed, I ended up wrapping ember-cli with Grunt, and then configuring Grunt to do the livereloading of my app.css. You can find more on my Stack Oveflow answer [here](http://stackoverflow.com/a/27133912/703410). Hope this helps!

---

<div class="post-metadata">

**Author:** ![xomaczar](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/xomaczar/32/16692_2.png) [@xomaczar](https://discuss.emberjs.com/u/xomaczar)\
**Post date:** [March 10, 2015, 12:51pm UTC](https://discuss.emberjs.com/t/livereload-ember-cll-only-reload-styles/6766/5 "2015-03-10T12:51:40Z")

</div>

Official support is in the works, meanwhile try this ember-addon [ember-cli-styles-reloader - npm](https://www.npmjs.com/package/ember-cli-styles-reloader)
