• 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.
  • Posts

    • Bet Apple things they invented naming stuff with the year
    • My home system is a 5800X (upgraded from 2700X) with a 7800 XT. I can't comment as to why you feel so strongly about the differences, but I have used both Windows 10 and 11 for literally thousands of hours each; I'd guess over 10,000 hours on Windows 10 and maybe half that on Windows 11. Earlier builds of Windows 11 had some pretty big UI lag issues, which did annoy me, but not enough to go back to Windows 10. 23H2 and forward have corrected all those issues for me and I have no complaints at all at this time. Let me clarify what I meant by "Windows 11 runs perfectly fine." I don't mean it is merely acceptable; I mean that I don't perceive a difference between it and Windows 10. I chose the word "fine" because I don't believe that either 10 or 11 are perfect in that area and both have the rare UI hiccup, but in my experience, their responsiveness is at the same level.
    • WinToUSB 9.9 by Razvan Serea WinToUSB allows you to install and run a fully-functional Windows on external hard drive, USB flash drive or Thunderbolt drive. It is so easy and efficient, with just 3 steps and a few minutes, you can create your first portable Windows 11/10/8/7 or Windows Server directly from an ISO, WIM, ESD, SWM, VHD, VHDX file or CD/DVD drive, or you can clone currently running Windows installation to USB or Thunderbolt drive as portable Windows. WinToUSB also supports creating Windows installation USB drive from Windows 11/10/8/7 and Windows Server installation ISO, with it you can install Windows from the USB drive easily. Note: The WinToUSB Free Edition is solely intended for non-commercial, private, and personal use on home computers. It should be noted that technical support is not available for the free edition. Use of WinToUSB Free Edition within any organization or for commercial purpose is strictly prohibited. WinToUSB key features include: Creation of Windows To Go from ISO, WIM, ESD, SWM, VHD(X) or DVD drive.Improved Clone Windows 11/10/8/7 to USB/Thunderbolt drive as portable Windows. Creation of Windows To Go on Non-Certified Windows To Go USB drive. Encrypt Windows To Go with BitLocker to keep your data safe. Creation of Windows installation and bootable WinPE USB drive with BIOS & UEFI support. Download Official Windows 11/10/8.1 ISO file from Microsoft. Use any edition of Windows 11/10/8/7 and Windows Server 2022/2019/2016/2012/2010 to create Windows To Go USB drive. Windows To Go (Portable Windows) Creator WinToUSB allows you to install & run fully-functional Windows on an external HDD/SSD, USB flash drive or Thunderbolt drive, which means you can carry the portable Windows drive to anywhere and use it on any computer. Faster installation and cloning speed compared to competing products Support any edition of Windows 11/10/8/7 and Windows Server Creation of Windows To Go from ISO, WIM, ESD, SWM, VHD(X) or CD/DVD drive Clone currently running Windows to USB/Thunderbolt drive Creation of Windows To Go on Non-Certified Windows To Go drive Create BitLocker encrypted Windows To Go Workspace Create portable Windows for Intel-based Mac computers Support for creating VHD(X)-based Windows To Go Windows Installation USB Creator WinToUSB releases a feature called "Windows Installation USB Creator" which allows you to create a Windows installation USB drive from a Windows 11/10/8/7/vista/2022/2019/2016/2012/2008 installation ISO file with a few simple steps, with this feature you can create a bootable Windows installation USB drive to install Windows on both Traditional BIOS and UEFI computers by using the same USB drive. Bypass Windows 11 system requirements (TPM 2.0, Secure Boot, Minimum hardware and Microsoft account) Install Windows on both BIOS and UEFI computers by using the same USB drive Windows PE Bootable USB Creator This feature allows you to create a bootable Windows PE USB drive, it can help you transfer the contents of a Windows PE ISO file to a USB drive and make the USB drive bootable, and this feature supports the creation of a bootable WinPE USB driver that supports both Traditional BIOS and UEFI computers. WinToUSB 9.9 changelog: Added option to disable BitLocker automatic drive encryption when creating Windows installation USBs Fixed bug: setup.exe cannot bypass the Windows 11 system requirements Fixed bug: Cloned Windows ARM64 cannot start properly Fix other minor bugs Download: WinToUSB 9.9.0 | 28.7 MB (Freeware) Links: Home Page | Free vs Pro Comparison | Screnshots Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Maybe you don't realize this...but everything you said agreed with me. Yes, many tech outlets reported on Ryzen 9000 issues prior to 24H2, which I already addressed, and as I already said, that issue only existed for a few short months. Ryzen 9000 was released the same quarter of 2024 as 24H2. So again...months, not years. I also already said 24H2 showed some minor improvements on older Ryzen CPU. The article you posted agrees with me, and even says the improvements were only 3-5%, which is even more petty an amount than I estimated. If you want to fuss on the 3-5% numbers, then yes, I will grant you that was an issue for an extended amount of time. In my opinion, that is such a small amount it isn't worth fussing over, but you are welcome to a different option. However, if that was your point, then you didn't make that point in good faith, because you highlighted Ryzen 9000 so much, which had a FAR bigger and FAR shorter issue, it's really a very different conversation.
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      snowy owl
      251
    3. 3
      +FloatingFatMan
      251
    4. 4
      ATLien_0
      228
    5. 5
      +Edouard
      191
  • Tell a friend

    Love Neowin? Tell a friend!