Rails: Use livereload with Asset Pipeline

Question

Quick question for rails pros out there...

When working with Rails 3.0.x apps I was a heavy user of Guard and LiveReload. However, it seems that when using the asset pipeline in Rails 3.1 the livereload guard does not know that changes to a Sass file should trigger sending new css to the browser.

Is anyone using LiveReload with the Asset Pipeline? If so, how are you making it work?

Thanks!

Answer 1

After following some issue threads on Github I found the following fixed my problem:

1) Make sure all scss files are named following the new asset convention, like so: filename.css.scss

I was using scss before Rails 3.1 and had just named all my sass files filename.scss.

2) Use the following for livereload in your guardfile:

guard 'livereload' do
  watch(%r{app/helpers/.+\.rb})
  watch(%r{app/views/.+\.(erb|haml)})
  watch(%r{(public/).+\.(css|js|html)})
  watch(%r{app/assets/stylesheets/(.+\.css).*$})    { |m| "assets/#{m[1]}" }
  watch(%r{app/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{lib/assets/stylesheets/(.+\.css).*$})    { |m| "assets/#{m[1]}" }
  watch(%r{lib/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{vendor/assets/stylesheets/(.+\.css).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{vendor/assets/javascripts/(.+\.js).*$})  { |m| "assets/#{m[1]}" }
  watch(%r{config/locales/.+\.yml})
end

Answer 2

I have found the following to work quite well too:

guard :livereload do
  watch(%r{^app/.+\.(erb|haml|js|css|scss|sass|coffee|eco|png|gif|jpg)})
  watch(%r{^app/helpers/.+\.rb})
  watch(%r{^public/.+\.html})
  watch(%r{^config/locales/.+\.yml})
end

This is not the default code that is generated when you run guard init livereload as for some reason that does not work so well with sass imports.

Answer 3

As @mirko mentioned in his comment, extra .css on scss files is deprecated. So adding that isn't a great solution, and I've experienced that simply adding the scss extension forces a page reload.

So I found that this works:

watch(%r{(app|vendor)(/assets/\w+/(.+)\.(scss))}) { |m| "/assets/#{m[3]}.css" }`

My understanding is this maps the scss file to the compiled css file. I hope it works for sass too.

Source: Github Issue