Visual Studio 2013 UP5 + Web Essential's (v. 2.6.36) generated css.map files are invalid in "Google Chrome", however it is valid in "Firefox". Due to this it became impossible to debug less files in google chrome.
Currently, I am using Web Essential 2.6.36 (+ Visual Studio 2013 Up5).
I can disable the source map from google chrome's developer's setting. Which will remove those errors, however still we cannot debug less files and change the style. Which is a terrible problem.
Any advice will be appreciated. Thank you in advance.
Problem is that WebEssentials saves files in UTF8 with BOM, but Chrome is not able to open these files as .map files.
As a temporary fix, you can go to your .map file in Visual Studio and save it as a Unicode (UTF-8 without signature) or US-ASCII using
File -> Advanced Save Options -> Unicode (UTF-8 without signature) or US-ASCII.
It is possible that on changing the associated .css file you will have to repeat this process. However, when I tested adding some rules to .css the correct format was preserved for the .map file.
I reported this on WebEssentials GitHub:
Issue 1993
And there are some other reports:
Issue 1994
Issue 1977
Related
I have a problem with my less map files generated by Visual Studio Web Essentials when working with local less code using WAMP server for web development.
Whenever I save changes to less file the corresponding css, css.map and min.css files are generated as expected but the Chrome and Firefox dev tools don't recognize them.
They don't map to the less source files as expected always showing only the "style.css:123" line number instead of "source.less:45".
Does anybody has the some issues?
I tried the following things:
- ensured that the chrome settings: "Enable CSS source maps & Auto-reload generated CSS": both are checked.
- added the folders to chrome workspace
- tried different settings in the WebEssential LESS options.
- ensured that the generated style.css ends with the line:
/*# sourceMappingURL=style.css.map */
What am I missing here? Any clues? I'm pretty sure that mapping directly to less source files was working a few time ago because this was one of the key features I choosed using less?!
I had the same problem and I resolved it only after 4 hours of trials and frustration...
The files generated by Web Essentials (2013 2.6) are encoded in "UTF-8 with BOM" while the source maps file should be "UTF-8 without BOM" to work ("ANSI" works too). I guess that the little sequence of bytes added causes a misinterpretation of source maps file or makes it not a valid JSON to Chrome/FF parser (but again this is just a guess).
If you change the encoding of source maps file to UTF-8 without BOM then Dev tools should work as expected.
Unfortunately it seems that Web Essentials doesn't allow to choose the file encoding and it is not related to the encoding of the starting file (so if you compile a less file encoded in "UTF-8 without BOM" or "ANSI" it still generate UTF-8 encoded files).
We are currently investigating work-arounds, otherwise we will drop web essentials and go for other tools.
Let me know if this was useful (I know it's late but still...).
I've set up Web Essentials 2013 (in Visual Studio 2012) and loaded in the default Twitter Bootstrap LESS source files. Auto-build and minification is working perfectly, except Web Essentials quite overdoes the job. When I select "bootstrap.less", make a change and save it, Web Essentials creates a new "bootstrap.css" as well as a "bootstrap.min.css" with everything inside I need. But when I edit e.g. buttons.less, it creates a buttons.css (and buttons.min.css) too (with all the includes and mixins). Which means, in fact, I'll have nearly the same css files over and over again under different names.
Can I declare certain files to be ignored on save?
There is a convention in Web Essentials that if the name of your less file starts with an underscore (like _utils.less) it will not be compiled to css on save.
https://webessentials.uservoice.com/forums/140520-general/suggestions/3319359-don-t-compile-nested-less-files
Okay, I figured it out.
What I initially wanted was LESS compilation on build, Web Essentials was so kind to do this on save. To deactivate this, in Visual Studio 2012 head over to Tools -> Options -> Web Essentials -> LESS and deactivate "Generate CSS file on save".
According to the Visual Studio Extension page for Web Essentials, minification on build works not by now, but will on future releases. I have to delete the .min.css files by myself and create it again on every build as it seems. :(
Pro-tip for every dev:
If you use any framework, tools, extensions etc. and your new super-powers don't work as expected, don't blame the extension, shut up and do it yourself.
Although what #corvuscorax says is absolutely true what I do (if you don't like the idea of starting your file names with an underscore) is to create a folder starting with a #
This seems to stop webessentials from compiling your less.
Note that Visual Studio won't let you create a folder with a starting hash so you will have to create it using your Windows Explorer and then add it to your project via visual studio.
For ignoring only files, you can use underscore at the file name.
Web Essentials has an internal convention whereby files beginning with an underscore will not be saved to CSS.
This is actually quite useful. You don’t want your variables.less or mixins.less files being saved as variables.css or mixins.css. So in this case, name them _variables.less and _mixins.less. They will be compiled (and thus checked for correct syntax) but won’t take up space on disk or in source control as redundant CSS files.
https://medium.com/#brendaningram/web-essentials-not-saving-css-files-a450b8c2d23a
There is a way to keep your filenames and prevent WebEssentials from compiling your LESS at the same time. Create .weignore file with filenames or masks for ignored files as described in the docs.
Visual Studio 2012 Update 2
Web Essentials 2.7
Hello,
Every time when I try to change or create any .less file, I got this message in css preview:
/*
Compile Error.
See error list for details
*/
And when I open Error List, I can see this:
LESS:
This thing same everytime, no description at all. It doesn't depend from code, even this code generate error:
body {
}
What shall I do?
I've been having this issue with Web essentials 2.7 and I still have it with v 3.2. Error message now reads as "LESS: Unrecognised input".
The only way I could get rid off this issue is to save main less file and all imported less files with encoding "UTF-8 without encoding" (File save, open Save As to find this option).
That's strange because Web essentials long time ago told BOM file markers bug was fixed. Also some other guys with same version of Web essentials do not have this issue using the same files.
So try for yourself, maybe it can help.
Look at this:Web Essentials LESS Compiler gives no Error Messages
try to uninstalled Web Essentials, then re-installed them.
Try to add this to the start of your less file:
*{}
Placing #import at the end of my main.less file helped with Compile Error issue.
body{
background:#bcg-main;
}
#import url('less/variables.less');
It happened to me before. I have to add in my .less files one by one to determine which file breaks the compilation. Then I can look into the file in suspicion and remove the bug.
I am working on a website that is English by default and optionally in Spanish. I am generating local resource files for each page with language appropriate content for various items.
So far to create my pair of resource files (default and Spanish) for each page, visual studio 2010 generates the first file like default.aspx.resx. I create the Spanish version manually by copying the default file and renaming to default.aspx.es.resx.
Is there a way to have visual studio generate both files for me? I can generate the default file, add controls to the page, and generate again and visual studio is smart to not blow away any work I've done in that file. I would like to be able to also update the Spanish resource file automatically.
There is no tool in Visual Studio (at least I haven't found one when researching the same request), and we dropped the idea of writing smart macros for that purpose that parse resx files and modify other based on changes.
There is, however, a decent free tool that supports creating and aligning resources: Zeta Resource Editor.
You can add files and entries on click, and editing resources is much nicer than in Visual Studio, in addition to quite a few other useful features.
Apparently, when Visual Studio 2008 (SP1) opens a CSS file, it doesn't recognize the UTF8 BOM marker as a BOM, but instead interprets it as text (first three characters show up as , but shouldn't be visible). While VS normally doesn't save the CSS files with a BOM, I'd expect the IDE to recognize and respect the BOM when it's there.
This may be a bug with Visual Studio, however, does anyone know a workaround?
This appeared to be a bug in Visual Studio 2008 SP1. Once it misinterprets the CSS file, it will continue misinterpreting it. Signs on the sand were, too, that rightclicking and selecting "Open With" did not work for any internal editor.
Closing Visual Studio and reopening it didn't work. What worked eventually was:
Rightclick the CSS file, select Open With and select CSS Source Editor With Encoding
Click Set as Default, then click OK. Nothing will happen.
Close all editors. Close Visual Studio
Reopen Visual Studio and your solution or project.
Double click the CSS file. It will ask for the encoding. Select Auto. It should now open correctly.
Rightclick again and set the default editor back to CSS Source Editor (otherwise you'll always have to select the encoding manually).
Or in short: associate with "With Encoding", restart VS, open CSS correctly with encoding "Auto", re-associate with default CSS Editor, done.