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)

Answer 2

How to get .less to compile to .css with Web Essentials 2012

To compile a .less file with VS 2012 + Web Essentials 2012, your .less files must be error free. Each .less file that requires an import or mixin must specify it. Highlight your .less file and preview the output in the preview pane. If there is an error specified, your compile to .css will not work.

It also helps to setup the Web Essentials options to compile the .less file upon build.

Tools > Options > Web Essentials > LESS > Compile On Build = TRUE

You may also set it to compile to a 'css' folder by setting the following.

Tools > Options > Web Essentials > LESS > Compile to 'css' folder = TRUE

This setting creates a CSS folder within the LESS directory where it places a [filename].css and [filename].min.css file for each .less file it compiled during the build process.

---

As to why Bootstrap-3.0.0-wip .less folder won't compile with Web Essentials 2012 (+ VS 2012)

a) It will not compile to .css files if there are any errors building the .less files.

b) Web Essentials 2012 (+VS 2012) does not yet appear to recognize multiple .less files in a folder that are all imported by a single entry point file, such as the bootstrap.less file in Bootstrap 3.0-wip (unless each file lists its required imports). This is likely because there is no way to specify the entry point file yet. Because of this, most of the Bootstrap .less files fail to compile since they do not have their variables and mixins defined. (since the mixins.less nor the variables.less file have been imported to the individual files) And since they fail to compile, the .less -> .css compile process silently fails.

c) The way to compile a folder of .less files that depend on each other (as of Web Essentials 2.7 is to concat all the files together into one big .less file in the order that they are listed in bootstrap.less.

d) Since step c is a time consuming pain, I recommend compiling bootstrap's less files with an external compiler for now. At least until Web Essentials allows you to set an entry point and compile a folder of dependent .less files in the required order.

Answer 3

Based on the changelog for Web Essentials, I'd say this was fixed on July 31st, 2013 ("Fixed LESS relative @import issue"). I just tried this with Visual Studio 2012 (Update 3) and the latest Web Essentials 2012 and Bootstrap 3.0 in an MVC 4 project, and it seemed to work fine (specifically, it was generating bootstrap.css from bootstrap.less).

For anybody who wants to do the same, all I did after installing Web Essentials was add the .less files to my Css folder, add the boostrap.js file to my Scripts folder, add the font files to my Fonts folder (Bootstrap now uses fonts instead of a sprite image), and included the compiled bootstrap.css and the bootstrap.js files in my main view. Note that I also right clicked one of the .less files to generate the solution settings (some config file used by Web Essentials). And to get the .css file generated the first time, I just made a superficial change and saved it.

Answer 4

This has become much easier now, and requires very little action. First off, I'm using VS 2013, but the steps should be the same for VS 2012:

1. Ensure that Web Essentials is properly installed.
2. Under TOOLS / Options / Web Essentials / LESS , ensure that Auto-compile dependent files on save is True , and Compile files on save is True .
3. If your Web Application project is currently using the pre-compiled NuGet package Bootstrap , or if you manually added Bootstrap to your project, remove it.
4. Using NuGet, add the Bootstrap Less Source package to your Web Application project.
5. Add a new bootstrap.less file to the ~/Content folder (MVC) of your application.
6. Delete the entire contents of this file, then click and drag the ~/Contents/bootstrap/bootstrap.less file into this file. This will create a @import "bootstrap/bootstrap"; entry in your new file.
7. To compile this file into CSS files, all you need to do is save the file (ie hit CTRL-S, or the Save File button).
8. If you make any changes to the files, all you need to do is resave this file.

Doing it this way will allow you easily update your NuGet package when a new version is available. You can add any less variable changes after the @import line.

ENJOY!