How to make Chrome understand the SASS/SCSS in your rails app

How to make Chrome understand the SASS/SCSS in your rails app(fonicmonkey.net)

37 points by foobar2k 13 years ago | 9 comments

jewbacca 13 years ago |

From the top comment (to save the scroll-conservative 30 seconds of doubt and confusion):

----

Michael Laccetti says:

Just a quick note that the ‘Experiments’ tab under the developer console will not show up unless you specifically enable it under chrome://flags (Enable Developer Tools experiments)

mhodgson 13 years ago |

I'm fairly certain this doesn't work with current versions of Chrome. The experimental support for the -sass-debug-info that this method uses was removed in favor of real sourcemaps landing in sass version 3.3.0.

You can try using the alpha release of sass 3.3.0 to get real sourcemaps but I haven't had any luck getting it to work with rails. It also will not work with compass 0.13.alpha, you have to downgrade to 0.12.2.

guybrush0 13 years ago | |

It's solid on the Chrome stable and beta channels, but possibly not on Canary. I'd hope they'll wait until sass 3.3 is released before removing the debug-info support from more stable channels.

msoad 13 years ago |

I'm trying to make it work with Assets Pipeline and Compass with no luck. Any ideas?

gamache 13 years ago | |

There were a few things I noticed:

- You need to be using 'sass-rails', not 'sass', in your Gemfile for config.sass to work. Don't put it in the :assets group, either.

- You must set config.sass.compress = false (or rather, you must not set it to true!)

- You'll probably need to blow away your assets cache (tmp/cache/assets/* or public/assets/*) to see the changes.

I just got it working with a Rails app at work, and I am pleased with the results. Chrome Web Inspector continues to make my life easier!

msoad 13 years ago | | |

Thank you for help. With all of that, I'm still getting no result.

Second line of CSS/SCSS reference appears but it's like ..:4 and points to no file.

Screenshot: http://i.imgur.com/4EJBBjd.png

guybrush0 13 years ago | |

Do you have the 'sass-rails' gem in your Gemfile? It's possible to have the asset pipeline work with just the 'sass' gem, but to get the full debug-info that Chrome requires you need to be using 'sass-rails' and specify the config options mentioned in the post.