madskristensen / WebEssentials2013

Visual Studio extension
http://vswebessentials.com
Other
945 stars 252 forks source link

SASS compiler generated .css.map files don't work in Chrome (UTF-8 BOM) #1955

Open RandScullard opened 9 years ago

RandScullard commented 9 years ago

The SASS compiler bundled with Web Essentials 2013.5 version 2.6.36 generates .css.map files in UTF-8 format with a byte order mark (BOM). This is preventing the source map from working in Chrome version 45.0.2454.101.

If I open the generated .css.map file in Visual Studio and use Advanced Save Options to change the encoding from "Unicode (UTF-8 with signature)" to "Unicode (UTF-8 without signature)", then Chrome's source mapping works correctly.

Please note that the command-line sass tool (version 3.4.18) generates the source map in ANSI encoding, not UTF-8.

lillicrm commented 9 years ago

map files have not been working in Chrome for me either or in Firebug. But they do work in the normal Firefox inspector though. I've not confirmed if it is BOM issue though. The only workaround I have found is to switch to Ruby compiler.

1) install Ruby http://rubyinstaller.org/

2) install SASS gem go to ruby command prompt and type the following to install SASS: gem install sass

3) change Web essentials to use Ruby compiler: Change setting Visual Studio > Tools > Options > Web Essentials > SASS > Use Ruby Runtime = True

4) Recompile all SASS Visual Studio > Web Essentials > Re-compile all SASS files

redaemn commented 9 years ago

I have a very similar problem with .css.map files generated by the LESS compiler. They do not work in Chrome unless I remove the BOM from the file. Is there an option that I can use to tell the compiler to generate the file WITHOUT the BOM?!?