Using Less and Twitter Bootstrap in ASP.NET MVC4

UPDATE 05/02/2013:

Changed ScriptBundle and StyleBundle to just Bundle, per Andrey Taritsyn:

Bundle Transformer it is not recommended to use together with the StyleBundle and ScriptBundle classes, because these classes already contain transformations (instances of the built-in minifiers: CssMinify and JsMinify). Use a Bundle class.

UPDATE 11/08/2012:

1. Create a new MVC4 Internet Application
   
2. Add the following Nuget Packages
• Install-Package BundleTransformer.Less
• Install-Package Twitter.Bootstrap.Less
3. Rename /Content/site.css to /Content/site.less 
4. Edit BundleConfig.cs in the App_Start folder and update the css file name to site.less like so:

   bundles.Add(new var cssTransformer = new CssTransformer();
   var jsTransformer = new JsTransformer();
   var nullOrderer = new NullOrderer();
   
   var defaultScriptsBundle = new Bundle("~/bundles/default.js").Include(
               "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery-ui-{version}.js",
               "~/Scripts/site.js");
   defaultScriptsBundle.Transforms.Add(jsTransformer);
   defaultScriptsBundle.Orderer = nullOrderer;
   bundles.Add(defaultScriptsBundle);
   
   var defaultStylesBundle = new Bundle("~/Content/default.css").Include("~/Content/site.less");
   defaultStylesBundle.Transforms.Add(cssTransformer);
   defaultStylesBundle.Orderer = nullOrderer;
   bundles.Add(defaultStylesBundle);
   

5. Add the following to the top of /Content/site.less in order to have access to all of the Bootstrap mixins:

   @import "less/bootstrap.less"; 
   body {
         padding-top: 60px;
         padding-bottom: 40px;
   }
   @import "less/responsive.less"; 
   

   
   

=================== THE REST OF THIS POST IS OUT OF DATE ==========

UPDATE 8/20/2012: I've created a Nuget package that performs the steps below. I'd suggest reviewing what the package does below and then running:
Install-Package Twitter.Bootstrap.Less.MVC4

ASP.NET MVC4 has a great new feature that can bundle and minify your CSS and Javascript files.

But in order to get Twitter Bootstrap to work it takes a bit more work. Here are the steps that worked for me.

1. Create a new MVC4 Internet Application
   
2. Add the following Nuget Packages
• Install-Package dotless
• Install-Package Twitter.Bootstrap.Less
3. Create an Infrastructure folder and add the following two files: (hat tip to this Stackoverflow question)
• ImportedFilePathResolver.cs
• LessMinify.cs
4. Rename /Content/site.css to /Content/site.less 
5. Edit BundleConfig.cs in the App_Start folder and replace the default Content/css bundle with the following:

   var css = new Bundle("~/Content/css").Include("~/Content/site.less");
   css.Transforms.Add(new LessMinify());
   bundles.Add(css);
   

   
   
6. Add the following to the top of /Content/site.less in order to have access to all of the Bootstrap mixins:

   @import "less/bootstrap.less";
   

   
   

If you have "shared" .less files from other projects I found importing them in site.less right after boostrap.less to work pretty well. They'll have access to all the mixins.

@import "less/bootstrap.less";
@import "less/shared.less";

The completed solution is available on Github here

If there is a better/easier way to do this please let me know in the comments!