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...).
Related
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
I have split my less/css into several files grouped by certain categories, so the single files stay easy to maintain. Though I only want to have one css file which gets imported into the layout.
For this I have - how I call it - a master less file which imports all the others like config, forms, layout and so on.
Now the problem is, that for example WinLess or all the other copilers i tried, only monitor the save of my master file, and only then compiles it. However this is stupid, because this file nearly never gets any changes. So what I would like to have is something, that detects changes on the imported less files and then only compiles the master file.
Does anyone know any tools, which are capable of that?
Or how do you manage your less files to bypass this problem?
Further Info: I have mapped the server directory locally via SSH and edit the files in there, i.e. the files are only pseudo local. They are on the server but accessible with a local path over a drive letter. The compiler should be able to work with that setup.
Thanks for the answers!
In all honesty, your best bet is to actually use Less's own compiler which will of course be the most up to date option. It will be done through command line but it's the best way to know that everything is correct, working and up-to-date.
All the information can be found in the Less Documentation Here
More information about compiling with imports can be found HERE
The latest version of WinLESS does report that it has automatic re-compiling when an #import file is changed so it could be that your version of WinLESS is out of date. (See HERE - 3rd bullet point under Features)
Alternatively, see if you can get it to work on purely local files. If this works, it may be an issue with the compiler not being able to do asynchronous checks over SSH.
I use Notepad++ with the NppExec-plugin on-save script. If you make a convention decision to always name your primary file "master.less" you can use this script:
NPP_CONSOLE 0
NPP_SAVE
if $(EXT_PART) != .less goto end
"C:\Node.JS\node_modules\.bin\lessc.cmd" -x "$(CURRENT_DIRECTORY)\master.less" > "$(CURRENT_DIRECTORY)\master.min.css"
:end
You can do something similar with any editor that supports batch scripting (like Stewartside suggests)
I have a LESS file that when saved ONLY updates the non-minified css file. No matter what I do it will not update the min file. I can of course minify the main via web essentials, but that sort of negates the function of compiling LESS on save...
There is no error or anything - it just happily ignores the min.css file. In VS2012 it works perfectly.
Does anyone have any idea of what to do about this?
/Erik
It can be done via setting: Tools -> Options -> Web Essentials -> LESS.
I found the answer here - How to ignore certain LESS files in Web Essentials LESS compiling? (Bootstrap)
Update:
This option must be set on CSS, see screenshot:
After this when you save LESS it will create a .min.css file too.
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.
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.