How can I enable Source Maps for Sass in rails 4?

google-chrome-devtools, ruby-on-rails-4, sass

Solution

There is a great new drop in replacement for sass-rails, which is not only faster, but also has the option to use inline source-maps.

Just add it to your Gemfile

#gem 'sass-rails', '~> 5.0'
gem 'sassc-rails'

and add the configuration

# config/environments/development.rb
config.sass.inline_source_maps = true

Don't forget to restart your server, then you should see it working in the inspector:

You can find the repo here: https://github.com/sass/sassc-rails

Problem

According to this issue https://github.com/rails/sass-rails/pull/192 `sass-rails` hasn't support for Sass 3.3 yet. But it seems that `sass-rails-source-maps` has been depending on Sass 3.3 since the very beginning. So is there a way to use this gem with `sass-rails`? According to the readme with `sass-rails-source-maps`, Chrome dropped support of the Source Maps files from Sass older than version 3.3. Does that mean there is no way of using Sass Source Maps with Chrome devtools now?

Original source