• 0

Guide to getting LESS working with Twitter Bootstrap in MVC 5


Question

What a pain in the ass to figure out when many of the other guides are for older versions or use dead projects.  I'm throwing this up in case anyone else wants to get LESS in MVC5.

 

What I'll be using:

Visual Studio 2013 Professional (Express versions probably work fine)

Web Essentials 2013 (A free extension, not required but nice to have)

Twitter Bootstrap (Just awesome)

 

So... LET THE FUN BEGIN

 

1.  Start with a new project then go to nuget and let's download what we need.  If you are unfamiliar with nuget, its an awesome package management service.

Go to Tools > Library Package Manager > Manage NuGet Packages for solution...

 

2.  Since Visual Studio 2013's release, there are already updates you can run on your project.

Click Updates and for the purpose of this guide, update:

> jQuery

> Microsoft ASP.NET Web Optimization Framework

> ANTLRv3

 

After this is done  Click Online on the left side then in the search box type "Bootstrap Less Source".  The current version is 3.0.2.

 

You'll see in the dependencies that LESS will also be installed. Install it.

 

Next, search for Bundle Transformer: LESS, Install this.

 

Finally, we need a javascript engine.  Bundle Transformer will give you a head up about this and give you two options.  Either MSIE or V8.  I'll be installing V8 because it sounds cool.

 

Search for V8 and the first one should be "JavaScript Engine Switcher for .Net: V8", install it.

 

3.  Associate V8 with Bundle Transformer (BT).

BT needs to know which engine to use so it can compile your LESS files.  So in your solution, scroll to the bottom and open "Web.Config".  If your config file looks like hell, Visual Studio has the best button of any IDE.  Click Edit > Advanced > Format Document.  SURPRISE! VS retabbed the structured XML!

 

To associate add the <less> block:

<bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <less useNativeMinification="false" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None">
      <jsEngine name="V8JsEngine" />
    </less>
    <core>
      <css>
        <minifiers>
          <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />
        </minifiers>
        <translators>

Save it.

 

4. Creating your bundles

Bundles are the new Jesus of the internet.  They simply make life easier.  For certain types like .js, MVC allows wildcards which is awesome.

 

Go to App_Start > BundleConfig.cs

 

First we need to type in our using statements so the file knows which libraries to use.

using System.Web.Optimization;
using BundleTransformer.Core.Builders;
using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;

In the BT documentation there is another way to build your bundles but for the purpose of this, I'll be doing it the long way.

 

Now everything inside the scope of RegisterBundles, delete (This is entirely optional.)

 

Now within the same scope, create new instances of variables.

            // Variables
            bundles.UseCdn = true;
            var nullBuilder = new NullBuilder();
            var cssTransformer = new CssTransformer();
            var jsTransformer = new JsTransformer();
            var nullOrderer = new NullOrderer();

Next, associating our scripts

            // JavaScript

            // jQuery
            var jquery = new Bundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js");
            jquery.Builder = nullBuilder;
            jquery.Transforms.Add(jsTransformer);
            jquery.Orderer = nullOrderer;

            bundles.Add(jquery);

            // Modernizr
            var modernizr = new Bundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-2.6.2.js");
            modernizr.Builder = nullBuilder;
            modernizr.Transforms.Add(jsTransformer);
            modernizr.Orderer = nullOrderer;

            bundles.Add(modernizr);

            // Scripts
            var js = new Bundle("~/bundles/js").Include(
                "~/Scripts/bootstrap.min.js",
                "~/Scripts/myScripts.js");
            js.Builder = nullBuilder;
            js.Transforms.Add(jsTransformer);
            js.Orderer = nullOrderer;

            bundles.Add(js);

            // POST: Validation
            var jqueryVal = new Bundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.unobtrusive.min.js",
                "~/Scripts/jquery.validate.min.js");
            jqueryVal.Builder = nullBuilder;
            jqueryVal.Transforms.Add(jsTransformer);
            jqueryVal.Orderer = nullOrderer;

            bundles.Add(jqueryVal);

jQuery should always go first.  Next Styles.  What's nice about this is at compile time it automatically minifies the CSS.

            // Styles
            var css = new Bundle("~/bundles/css").Include(
                "~/Content/bootstrap/bootstrap.less");
            css.Builder = nullBuilder;
            css.Transforms.Add(cssTransformer);
            css.Transforms.Add(new CssMinify());
            css.Orderer = nullOrderer;

            bundles.Add(css);

Finally, we tell the bundles to optimize.

            BundleTable.EnableOptimizations = true;

Ok so let's run our project quick!

 

OH GOD WHAT HAPPENED?!!!  ohhh the humanity!  The styles are dead!!  ohhhhhh!!!!!!!!!

 

Hang on!  On to step 5!

 

5. Associate our bundles with the layout

Go to Views > Shared > _Layout.cshtml

 

In the header add:

    <!-- styles -->
    @Styles.Render("~/bundles/css")
    <!-- /styles -->
    @Scripts.Render("~/bundles/modernizr")

and down on the bottom of the body add:


    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/js")

Compile the project again and whaddya know LESS WORKS!  Now you can configure your variables using LESS and save time!

 

KNOWN ISSUES:

 

Google is not happy with query strings.

2 Bad requests atm, tomorrow may have update.

Modernizr is not production version, get that at their website.

 

FINALLY:

If anyone knows some better solutions or fixes.  DO TELL!

7 answers to this question

Recommended Posts

  • 0

I thought less was the 'opposite of more':

Less  is  a program similar to more (1), but it has many more features.  Less does not have to read the entire input file before starting, so with large input files it starts up faster than text editors like vi (1).  Less uses termcap (or terminfo on some systems), so  it  can run  on  a  variety  of  terminals.  There is even limited support for hardcopy terminals.  (On a hardcopy terminal, lines which should be printed at the top of the screen are prefixed with a caret.)

Commands are based on both more and vi.  Commands may be preceded by a decimal number, called N in the descriptions below.  The number  is used by some commands, as indicated.
  • 0

Hello, Kalint!

Thanks for a great guide! But there is one problem: 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. As most simple solution to this problem I recommend to install the BundleTransformer.MicrosoftAjax package.

  • 0
  On 07/12/2013 at 11:49, Taritsyn said:

Hello, Kalint!

Thanks for a great guide! But there is one problem: 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. As most simple solution to this problem I recommend to install the BundleTransformer.MicrosoftAjax package.

Hm... I will look into this!

This topic is now closed to further replies.
  • Popular Now

  • Posts

    • considering that took 4 years "to fix" ryzen performance on windows 11. look at the amount of time that AMD user have a degraded performance compared to intel on microsoft latest and greatest OS
    • MosaLingua Language Learning lifetime subscription price dropped by 97% by Steven Parker Today's highlighted deal lets you save 97% off lifetime access to a MosaLingua Language Learning Fluency Bundle. Buying link below. Description: Learning new languages doesn't have to be difficult or exhausting. In fact, you can learn and speak a foreign language at your own pace. MosaLingua is an all-in-one platform for learning the most useful words and expressions in the language of your choice, practicing language immersion, and improving your language skills with numerous different resources. Pick up the skills you need to use the language in any situation and store up to 6,000 keywords and expressions in your long-term memory, and choose content depending on your needs and your level. MosaLingua is a personalized language learning tool that adjusts to your level and your schedule, letting you make quick progress and avoid time-wasters. Access to 11 Full Language Courses: English, Spanish, French, Italian, German, Portuguese, Russian, Chinese, Japanese, Korean, and Arabic—plus any new languages we add in the future, at no extra cost. Science-Based Learning Method: Spaced repetition, neuroscience, cognitive psychology, and the 80/20 rule combine to help you retain vocabulary & speak faster. All-in-One Learning App: Practice listening, speaking, reading, and writing in one place with dialogues, flashcards, videos, audiobooks, grammar lessons & hands-on exercises. AI-Powered Coaching & Tools: Practice with MosaChat-AI, your 24/7 virtual tutor that helps you improve your writing and speaking skills with personalized feedback. Learn from the Content You Love: Thanks to MosaDiscovery, you can turn any online content into a learning opportunity. Learn languages by watching YouTube videos, Netflix series, reading articles, or exploring any website—with instant translations, personalized flashcards, and real-world vocabulary. Offline Mode & Cross-Platform Sync: Learn on your terms—anywhere, anytime. Use the app on iOS, Android, or the web. Built for Busy People Who Want Quick Results: Make real progress with just 10 minutes per day. Short, targeted sessions fit into any schedule. Good to know Length of access: lifetime Redemption deadline: redeem your code within 30 days of purchase Access options: desktop or mobile Max number of device(s): 1 Only available to NEW users Version: latest Updates included Lifetime access to MosaLingua Language Learning normally costs $4,850, but you can pick it up for just $97.99 for a limited time that's a saving of $4,702 off. For a full description, specs, and info, click the link below. Mosalingua: Lifetime Subscription now just $97.99 (was $4,850) Although priced in U.S. dollars, this deal is available for digital purchase worldwide. We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Make a donation to support our day to day running costs Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
    • you know what, looking at it again. you're right, i'm wrong. there are no curves. it's just straight lines. it's flat.
  • Recent Achievements

    • One Month Later
      EdwardFranciscoVilla earned a badge
      One Month Later
    • One Month Later
      MoyaM earned a badge
      One Month Later
    • One Month Later
      qology earned a badge
      One Month Later
    • One Year In
      Frinco90 earned a badge
      One Year In
    • Apprentice
      Frinco90 went up a rank
      Apprentice
  • Popular Contributors

    1. 1
      +primortal
      449
    2. 2
      +FloatingFatMan
      249
    3. 3
      snowy owl
      239
    4. 4
      ATLien_0
      196
    5. 5
      Xenon
      141
  • Tell a friend

    Love Neowin? Tell a friend!