Setting up ASP.NET MVC 4 and Twitter Bootstrap 3 with LESS

September 17th, 2013 by Jennifer Rogers

ASP.NET MVC + Twitter Bootstrap + LESS
When setting up an ASP.Net MVC 4 application recently, I decided to add Bootstrap 3 into the project. The default NuGet package for Bootstrap (Twitter.Bootstrap) includes the source and the minified versions of the JavaScript and CSS. However, should you want to edit the LESS files and recompile and minify the CSS, you will need a different Bootstrap NuGet package, a minifier adapter NuGet package, and some additional configuration.

Also, while client-side LESS interpretation is great when working in a development environment, it may not be ideal or available for all website visitors. For this reason, you can use the BundleTransformer.Less library, a JavaScriptEngineSwitcher (either JavaScriptEngineSwitcher.V8 or JavaScriptEngineSwitcher.Msie – I used Msie in my project), and a minifier adapter (I used BundleTransformer.MicrosoftAjax; you could also use BundleTransformer.Yui) to compile the LESS to CSS and to minify it for performance in those environments.

Setup

First, make sure you have the following NuGet packages installed:

Dependencies:

In the RegisterBundles(BundleCollection bundles) function of the BundleConfig class, add this block of code:

App_Start/BundleConfig.cs
#region LESS
 
var nullOrderer = new NullOrderer();
 
var css = new CustomStyleBundle("~/Content/less").Include("~/Content/bootstrap/bootstrap.less");
css.Orderer = nullOrderer;
 
bundles.Add(css);
 
#endregion

Be sure to include the new bundle in the <head> tag of your layout view:

Views/Shared/_Layout.cshtml
@Styles.Render("~/Content/less")

Also, some changes will need to be made to the configuration/bundleTransformer section in the Web.config. The defaultMinifier will need to be set for css and js minification and the less/jsEngine property will also need to be added.

Web.config
<configuration>
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    ...
    <css defaultMinifier="MicrosoftAjaxCssMinifier">
    ...
    <js defaultMinifier="MicrosoftAjaxJsMinifier">
    ...
    <less>
      <jsEngine name="MsieJsEngine" />
    </less>
    ...
  </bundleTransformer>
</configuration>

When you are testing this setup, it may be helpful to add the following line to the end of the RegisterBundles function in your BundleConfig if you’d like to verify the minification process in a development environment:

App_Start/BundleConfig.cs
BundleTable.EnableOptimizations = true;

Remember that you can also control which environments are deployed with the minified versions versus the original LESS files by using Web.config Transformation Syntax:

Web.config
<system.web>
  <compilation debug="true" />
</system.web>

Web.Release.config
<system.web>
  <compilation xdt:Transform="RemoveAttributes(debug)" />
</system.web>

That’s all! Thanks for reading. Good luck and enjoy using Twitter Bootstrap (with LESS) in ASP.Net MVC.


References:

  1. ASP.Net MVC 4: Bundling and Minification
  2. CDeutsch’s Blog: Using Less and Twitter Bootstrap in ASP.NET MVC4
  3. Bundle Transformer Discussions: Unclear configuration

Update: As Andrey pointed out in the comments, it is unnecessary and not recommended to use both BundleTransformer and CssMinify. After verifying that the code still minified the CSS correctly, I have updated the post to include the update the code.

Update: Andrey pointed out that since ScriptBundle and StyleBundle already use transformations, it is recommended to instead use the Bundle Transformer class “CustomStyleBundle”. Also, when switching to the recommended CustomStyleBundle, I noticed the LESS code wasn’t minifying anymore (although it was compiling to CSS), so I added the BundleTransformer.MicrosoftAjax NuGet package to minify the translated LESS and specified in the <bundleTransformer> section of the Web.Config the MicrosoftAjax adapters as the defaultMinifiers. I edited the post to update the code sections and the explanations.

Reddit Plusone Facebook Twitter Pinterest Stumbleupon Tumblr Digg Delicious

10 Responses to “Setting up ASP.NET MVC 4 and Twitter Bootstrap 3 with LESS”

  1. Daniel Lo Nigro Says:

    Just keep in mind that MsieJsEngine won’t work on Mono. Is there a reason this doesn’t just use the native .NET LESS port?

  2. Sam B Says:

    Silly question, but curious to know what version of Visual Studio you are using?

  3. jennyfofenny Says:

    @Sam B: Not a silly question, I am using Visual Studio 2012.

  4. Andrey Taritsyn Says:

    @Daniel Lo Nigro: The dotless library (http://www.dotlesscss.org) does not support LESS 1.4.X, and, therefore, Twitter Bootstrap 3.0. Instead `MsieJsEngine` you can use `V8JsEngine` from the JavaScriptEngineSwitcher.V8 package (http://www.nuget.org/packages/JavaScriptEngineSwitcher.V8). In addition, you can write for Mono your own JavaScript engine by implementing the `JavaScriptEngineSwitcher.Core.IJsengine` interface. For these purposes was created the JavaScript Engine Switcher project (http://github.com/Taritsyn/JavaScriptEngineSwitcher).

  5. Andrey Taritsyn Says:

    @jennyfofenny: Is not recommended to use the `CssMinify` and `JsMinify` classes together with a Bundle Transformer. I will not explain why it should not do, because I have written about this in the documentation (http://bundletransformer.codeplex.com/documentation) and comments to the following blog posts:
    1. Using Less and Twitter Bootstrap in ASP.NET MVC4 – http://blog.cdeutsch.com/2012/08/using-less-and-twitter-bootstrap-in.html
    2. Who could ask for more with LESS CSS? (Part 2 of 3–Setup) – http://geekswithblogs.net/ToStringTheory/archive/2012/11/30/who-could-ask-for-more-with-less-css-part-2.aspx

  6. jennyfofenny Says:

    @Andrey Taritsyn Thanks for taking the time to post a comment about CssMinify and to lend some light to the reason for using a JavaScriptEngineSwitcher. Also, I have updated the post to remove the call to CssMinify – when I originally developed the code, it looked like it wasn’t minifying the CSS correctly when it was deployed, but after looking closer, I was getting tricked by Firebug. Thanks for the help.

  7. Andrey Taritsyn Says:

    @jennyfofenny: Thank you for updated post!

    Unfortunately, it is unclear from the text of post and settings of Web.config file, that minifier-module you have installed: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.Csso, BundleTransformer.CleanCss or BundleTransformer.WG?

    I also want to note, that for BundleTransformer.Less is not necessary to install module-minifier. You can use the native CSS minifier of `LessTranslator`, to do this, specify the following settings in the Web.config file:

    In addition, you can increase performance of bundle processing, if you add the following code:

    var nullBuilder = new NullBuilder();

    css.Builder = nullBuilder;

    You can also significantly simplify this code by using `CustomStyleBundle` class:

    #region LESS
    var nullOrderer = new NullOrderer();

    var css = new CustomStyleBundle(“~/Content/less”).Include(“~/Content/bootstrap/bootstrap.less”);
    css.Orderer = nullOrderer;

    bundles.Add(css);

    #endregion

  8. jennyfofenny Says:

    @Andrey Taritsyn Thanks for the guidance on the CustomStyleBundle class. When I made the change, I realized I had to also install the a minifier module because the LESS wasn’t minifying anymore, so I downloaded the MicrosoftAjax minifier adapter. I updated the post to use the CustomStyleBundle and MicrosoftAjax.

  9. Andrey Taritsyn Says:

    @jennyfofenny: Thanks again for a great article and updates!

  10. design Says:

    Thanks for another informative website. Where else may just I get that kind of information written in such a perfect approach? I’ve a project that I am just now working on, and I’ve been at the look out for such information.

Leave a Reply