WebEssentials LESS CSS map files not working
I have a problem with my smaller map files generated by Visual Studio Web Essentials when running local smaller code using a WAMP server for web development. Whenever I save changes to a smaller file, the corresponding css, css.map and min.css files are generated as expected, but the Chrome and Firefox dev tools do not recognize them. They don't map to smaller source files as expected, always displaying only the line number "style.css:123"
instead of"source.less:45"
... Anyone have some problems? I have tried the following things: - guaranteed to be chrome settings: "Include original CSS maps and automatically reload generated CSS": both are checked. - added folders to chrome workspace - tried different settings in WebEssential LESS options. - ensure that the generated .css style ends with the line: / * # sourceMappingURL = style.css.map * /
What am I missing here? Any hints? I'm pretty sure mapping directly to smaller source files worked a few years ago because that was one of the key features I chose using less ?!
source to share
I had the same problem and only resolved it after 4 hours of trial and frustration ...
Files created by Web Essentials (2013) are encoded in "UTF-8 with BOM", while the source maps file must be "UTF-8 without BOM" to work ("ANSI" works too). I am guessing that the small sequence of bytes added is causing the source maps file to be misinterpreted or invalidating JSON for Chrome / FF parsing (but again this is just an assumption).
If you change the source maps file encoding to UTF-8 without BOM, the Dev tools should work as expected.
Unfortunately, it looks like Web Essentials does not allow you to choose the file encoding and is not specific to the encoding of the source file (so if you compile fewer files encoded in "UTF-8 without BOM" or "ANSI" it still creates UTF encoded files -8).
We are currently investigating workarounds, otherwise we will drop the web pages and move on to other tools.
Let me know if this was helpful (I know it's late, but still ...).
source to share