Live CSS / view reloading
In Rails 5+ projects we manage our assets using Webpacker. The built-in Webpack dev server already reloads your page when your CSS or JS changes.
The instructions in this card are still relevant for projects using the asset pipeline ("Sprockets").
Next time you have to do more than trivial CSS changes on a project, you probably want to have live CSS reloading, so every time you safe your css, the browser updates automatically. It's pretty easy to set up and will safe you a lot of time in the long run. It will also instantly reload changes to your html views.
Simply follow the instructions below, taken from blog.55minutes.com.
Install CSS live reload (only once per project)
Add this to your Gemfile in the
gem 'guard-livereload', :require => false gem 'rack-livereload'
Add the middleware, by adding the following to your
guard init livereload.
- Restart your server.
Use CSS live reload
guard -P livereload in a console, and keep it open. Now CSS changes should be instantly pushed to your browser.
Notes for Ruby 1.8.7 projects
I had some issues where newer versions of
guard wouldn't see file changes in an Ruby 1.8.7 project. After some experiments the following versions of
guard-livereload worked for me:
gem 'guard', '=1.8.1' gem 'guard-livereload', '=1.4.0', :require => false
Notes for Rails 2.3 projects
On Rails 2.3, you need to add the middleware like this:
# config/environments/development.rb require 'rack-livereload' config.middleware.use ::Rack::LiveReload
When you run into
Listen error: unable to monitor directories for changes you may fix it by increasing the amount of inotify watchers with
sudo sysctl fs.inotify.max_user_watches=100000 echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf sudo sysctl -p