Menu
Before start, I double check on StackExchange and I didn't find any other site that will fit this question. If I missed, excuses.
I followed this guide, to enable chrome that support with source maps sass, but I can't make it work.
The funny part is that I followed another guide, to enable support for Firefox, and is working.
The part that both have in common is setting up the config.sass.debug_info = true in rails.
So, I think that the problem isn't on rails but in chrome, but I'm not sure.
This is my setup:
update - It seems like the problem is with Chrome 27.x series. If that is the case, this question turns to be a waiting for fix from chrome developers. So I'll investigate a bit more, if I can confirm, I'll close this question. Thanks for your time.
update - So it seems to be true, this is an issue of google chrome, thanks to all for your help
524
Browser support To enable source maps in Google Chrome, go to Developer Tools, click the little cog icon, and then make sure that “Enable Javascript source maps” is checked. That's it.
Open developer tools. Click the gear icon (top right) to open Settings. Under General, look for the “Sources” section. In that section, select “Enable CSS source maps”.
A “source map” is a special file that connects a minified/uglified version of an asset (CSS or JavaScript) to the original authored version. Say you've got a file called _header. scss that gets imported into global. scss which is compiled to global. css .
The problem is that Chrome developer tools recently changed what version of source maps it supports. The article you mention details how to set up an older style of CSS source maps. However, Chrome now supports version 3 source maps. The new source maps puts the mapping in a separate *.css.map file instead of inline in the compiled CSS file. The benefits of the new format is that it is much smaller and does not break styles for older Internet Explorers. The link that @justin-smith provided should point you in the right direction. However, from my findings, even though the pre-released version 3.3 of the SASS gem knows how to generate the .map files, there still needs to be support from the sass-rails gem to correctly serve these files from the Rails asset pipeline. I created a repo in order to figure out the current state of support for v3 sass source maps in Rails. There may be a way to short circuit the asset pipeline and have the sass gem precompile files and put them in a directory which comes early in the asset path. However, I have not figured out how to to this.
79
Try following the tutorial in this link. I just set this up this morning and it's working fine for me.
This will let you inspect an element and then find what the corresponding SCSS declaration is.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
