How do I compile the Bootstrap-3.0.0-wip less folder to .css with Visual Studio and Web Essentials 2012?

Question

How do I compile a folder of .less files (such as Bootstrap-3.0.0-wip) included into a Visual Studio 2012 MVC web project?

I can compile .less to .css with external tools, but it is not clear how to compile .less files to .css as part of a build with the latest Visual Studio. (despite the .less compatibility provided by current VS plugins*) I can see the compiled output of .less files in a preview window, but I cannot figure out how to save the output or compile it automatically when I run the project.

*VS 2012.2 update, Microsoft Web Developer Tools, and Web Essentials 2012

Answer 1

To compile a folder of Bootstrap .less files with Visual Studio 2012 + Web Essentials 2012, you must make a slight adjustment as Web Essentials cannot compile the bootstrap less folder as formatted on github.

Add the bootstrap-3.0.0-wip folder to a Visual Studio web project. (my project happened to be an ASP.Net MVC 4 Empty project, but it shouldn't matter.)

Move the bootstrap.less file (the entry point for all of the project less files) up one folder, leaving all of the other files in the \less folder.

It should look like this:

bootstrap.less
less\[all other less files].less 

Next, edit the bootstrap.less file adding the "less\" folder prefix to all of the @import statements as follows:

// Core variables and mixins
@import "less\variables.less";
@import "less\mixins.less";

// ...etc until all of the import statements include less\ at the start

Now, save the project. The moved bootstrap.less file should have been compiled into a bootstrap.css and a bootstrap.min.css file unless you still have a compile error. (see error list for details)

The remaining .less files will not compile because they still have errors (no @import statements on the individual files), but it won't matter as you have compiled the important one.

---

If you integrate Bootstrap3.0.0-wip source code within an ASP.MVC 4 project you can take advantage of MVC 4's bundling to also compile the JS files.

Assuming you drop the Bootstrap source code into a folder in your project /Content/bootstrap, add teh following to your App_Start\BundleConfig.cs file:

// Bootstrap 3 script bundle
bundles.Add(new ScriptBundle("~/bundle/scripts/bootstrap_js").Include(
            "~/Content/bootstrap/js/bootstrap-transition.js",
            "~/Content/bootstrap/js/bootstrap-alert.js",
            "~/Content/bootstrap/js/bootstrap-button.js",
            "~/Content/bootstrap/js/bootstrap-carousel.js",
            "~/Content/bootstrap/js/bootstrap-collapse.js",
            "~/Content/bootstrap/js/bootstrap-dropdown.js",
            "~/Content/bootstrap/js/bootstrap-modal.js",
            "~/Content/bootstrap/js/bootstrap-tooltip.js",
            "~/Content/bootstrap/js/bootstrap-popover.js",
            "~/Content/bootstrap/js/bootstrap-scrollspy.js",
            "~/Content/bootstrap/js/bootstrap-tab.js",
            "~/Content/bootstrap/js/bootstrap-typeahead.js",
            "~/Content/bootstrap/js/bootstrap-affix.js"));

(Note: The order of these js files was retrieved from the Makefile included with the project)