As an alternative, you can try to use sassc-rails with inline source maps support.
NOTE: This gem requires sass-rails
version 5.0.0
This gem allows you to see your Rails 4 .scss
source files in Google Chrome inspector, which can be useful for debugging.
debug_info
option available in stable sass gem is no longer working in Google Chrome, because Chrome now supports Source Map v3 only.
Source Maps are supported by sass
gem in version 3.3
and higher. Unfortunately, sass-rails
, the rails
dependency, freezes sass
gem to version ~> 3.2.0
. To use this gem, you need to follow these steps:
- Add
sass-rails-source-maps
to your application's Gemfile :
group :development do
gem 'sass-rails-source-maps'
end
This branch depends on sass-rails
version 5.0.0
which has more relaxed dependency for sass
gem. So to avoid version conflict you need to:
- Unfreeze
sass-rails
gem in your Gemfile (delete version forsass-rails
)
For example, in new Rails 4.1.5
application change line
gem 'sass-rails', '~> 4.0.3'
to
gem 'sass-rails'
in your Gemfile
.
- And then execute:
bundle update sass-rails
- After that, run:
rake assets:clobber
to make Rails regenerate assets. After assets regeneration, assets/source_maps
containing sass
source maps is created in public
directory.
If everything works fine, you should see something like this
Enabling source maps may vary in different Chrome versions. For more info please see Working with CSS Preprocessors.
- This gem is not intended for production usage.
- This gem is Rails 4.x compatible only
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request