How to Ignore Certain Less Files in Web Essentials Less Compiling? (Bootstrap)

How to ignore certain LESS files in Web Essentials LESS compiling? (Bootstrap)

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.

Configure which .less files are compiled by Web Essentials

It's obviously not possible to configure it in Web Essentials.

I finally ended up using dotless to manage LESS in my ASP.Net MVC application.

How to include LESS files in web page using Web Essentials?

Just configure your Web Essentials to compile on save and build. That way you can always manually generate the CSS by saving the LESS file.

Optionally, you can configure Web Essentials to minify the generated CSS:

Also add a StyleBundle which loads the generated minified CSS file:

bundles.Add(new StyleBundle("~/bundles/css").Include("~/Content/bootstrap.min.css"));

How to compile Bootstrap LESS source in VS 2013

For the record the current Web Essentials will re-compile any compiled files when edits occur, including non CSS generating files like variables.less. You just need to manually edit them the first time to put them into this mode. For example the procedure for new projects which want to re-brand Bootstrap variables is:

1. Make sure the current Web Essentials Visual Studio package is installed.
2. Add the Bootstrap Source NuGet package to the site.
3. Manually edit the files you want automatically generated normally, e.g. /Content/bootstrap/bootstrap.less and theme.less. When you save the first compilation will occur, generating .css and min.css as related items in the Solution Explorer.
4. Now when you edit related files (e.g. variables.less to do branding) the compiled bootstrap and theme CSS is automatically updated during build.

The only dirty part about this is the first time you have to edit the original source, changing the timestamp. Hopefully that does not cause problems with updates to the NuGet package in the future.

There is an open issue in the Web Essentials project about this. One simple solution is to get the context menu option to do it manually the first time, the other is a permanent setting on the file in Visual Studio, such as the build action or custom tool action.

https://github.com/madskristensen/WebEssentials2013/issues/1632

You can change the behaviour of recompilation in the Visual Studio "Tools - Options - Web Essentials - LESS" settings.

Can't compile nested less files with Web Compiler 2015

I had the same problem. Web Compiler failed in many ways and the workarounds were messy and wouldn't have been easy to support. Future versions of Web Compiler might be useful, but I came to the conclusion that it's worth the trouble to just switch to a more mature less compiling tool.

This is what worked for me:
Disable Web Compiler
Tools->Extensions and Updates->Installed(search for Web Compiler)->Disable

Then setup Grunt.js by following one of the many tutorials out there. I used this one by Scott Hanselman:
http://www.hanselman.com/blog/IntroducingGulpGruntBowerAndNpmSupportForVisualStudio.aspx

Here's another guide I found very useful:
https://www.orderfactory.com/articles/Bootstrap-LESS-Grunt-VS.html

Since it sounds like you were basically where I was before I followed these instructions, there's a chance you might run into another issue with TypeScript compiling, which Web Compiler turned on by default.

If you get a bunch of "duplicate identifier" errors related to lib.core.d.ts, you may have to disable automatic typescript compiling:
right-click Project->Properties->TypeScript Build->uncheck "Compile on save"

Installing Web Compiler and setting up node tools and assigning an automated task can result in unleashing the ts compiler to run through all the node_modules, looking for things to compile. It can be a mess.

If you want to leave TypeScript compiling on build, you'll need to add a tsconfig.json file to the root of your project to define specific file paths. Without this file, the compiler looks everywhere and you really don't want that. I found it easier to just disable it.

Here's more information on that:
Typescript, confusing "duplicate identifier" error message

Hope this helps.

Prevent check-in of generated CSS from LESS file in TFS

Team Foundation Server version control (TFVC) supports a .tfignore file if you're using local workspaces. See MSDN for more information on the format of .tfignore

---

Related Topics