• 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

    • Stylish Samsung Galaxy S25 Edge gets 20% discount sending it to lowest price by Paul Hill If you’re in the market for a powerful, stylish phone, then you may be interested in the Galaxy S25 Edge, which is now reduced to $969.99, down 20% from the $1,219.99 list price. This is the lowest price that the device has been at on Amazon. You can get the device at this price if you go for the Titanium Icyblue or Titanium Silver editions. These models are the top-end S25 Edge variants with 512GB of storage. While this Samsung device may be about as thick as a pencil, it’s constructed from titanium and uses Corning Gorilla Glass Ceramic 2 on the display. This should ensure durability, despite its thin design. The thickness of this phone is just 5.8mm, and it weighs 163g. Camera capabilities and AI enhancements The Galaxy S25 Edge's camera system is impressive. It has a 200MP main camera with optical image stabilization and a 2x optical quality zoom. This feature magnifies the image using optical mechanisms in the camera lens so that the zoomed image retains its original clarity, detail, and resolution of the scene. On the back, there is also a 12MP ultrawide camera with autofocus and on the front, there’s a 12MP camera. Like many phones coming out now, there are AI-powered camera features such as Night Video, Best Face for group shots, Portrait Selfie, and Gallery Search by description. Notably, there is no dedicated telephoto lens like in the S25+ and S25 Ultra. This is a tradeoff that the company decided to make to achieve its ultrathin design. Telephoto lenses are camera lenses that are designed to make distant objects appear closer and larger in your photos and videos. The absence of this telephoto lens may be a deal breaker for those looking to use this camera for professional shots; otherwise, it’s still very impressive, especially with that 200MP main camera. Performance, display, and integrated AI features The S25 Edge is powered by the Snapdragon 8 Elite chipset, specifically the 3-nanometer Qualcomm SM8750-AB. It has an octa-core CPU (2x4.47 GHz Oryon V Phoenix L + 6x3.53 GHz Oryon V2 Phoenix M) and an Adreno 830 GPU. This model's display is a 6.7-inch QHD+ Dynamic AMOLED 2X with a 120Hz adaptive refresh rate and high brightness. This device has plenty of other AI features too, outside of the camera, including Cross App Action, Audio Eraser for videos, Now Brief/Now Bar for personalized information, and of course, Google Gemini. With 12GB of RAM, the specs on this phone are really very good. It should be capable of doing most tasks you throw at it, including gaming. You may wonder if it will handle games well, given that the thin design means it could overheat. Samsung has already thought about this and included a reconfigured vapor chamber that helps to keep the phone cool. Battery life and charging speed: The main compromise Aside from the removal of the telephoto lens, this phone also has a drawback in terms of battery life. Its 3,900 mAh battery capacity means it’s smaller than many other devices, even compared to budget phones. Another disappointing aspect is the charging, where the wired charging speed is limited to 25W—that’s lower than what you find on very affordable Xiaomi POCO devices. This battery limitation might make this device a bad choice if you’re away from a charger for long periods. One affordable way to mitigate this downside is by carrying a portable charger, but still, it’s ironic that you buy a thin phone to be lighter and then end up carrying a brick-sized charger around with you. You could also just bring your charger and plug it into an outlet. Is the Galaxy S25 Edge the smart buy for you? If you’re someone who wants a sleek, lightweight phone that has a premium build and can easily slice through tasks you throw at it, then the Galaxy S25 Edge is very likely for you. It’s also great for anyone looking for a standout camera that doesn’t need a telephoto lens. However, if you need a device with all-day battery life because you’re going camping or to the middle of nowhere, then you could probably find a better fit with a longer battery life. If this device is for you, check out the links below. Samsung Galaxy S25 Edge (Titanium Icyblue): $969.99 (Amazon US) / MSRP $1,219.99 Samsung Galaxy S25 Edge (Titanium Silver): $969.99 (Amazon US) / MSRP $1,219.99 This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • I got too many apps I use actively. Theres been too often I completely blank on the name of the application and had to manually look through the list for it. Now I'm using Start11 and got my apps sorted in the Start menu by categories so that if I'm looking for Krita i can find it under "Art editors". If MS are going to change it, they should consider making automated categories. Seen some Linux distros do that. But if they do, theres probably gonna be a lot of wrongly categorized apps though, unfortunately.
    • LAV Filters 0.80.0 by Razvan Serea LAVFSplitter is a multi-format media splitter that uses libavformat (the demuxing library from ffmpeg) to demux all sorts of media files. LAV Splitter is a Souce Filter/Splitter required to demux the files into their separate elementary streams. LAV Audio and Video Decoder are powerful decoders with a focus on quality and performance, without any compromises. Supported Formats: MKV/WebM, AVI, MP4/MOV, MPEG-TS/PS (including basic EVO support), FLV, OGG, and many more that are supported by ffmpeg! LAV Filters are based on ffmpeg and libbluray and is aimed to offer a all-around solution to perfect playback of file-based Media as well as Blu-rays. LAV Filters 0.80.0 changelog: LAV Splitter NEW: Introduced the IURLSourceFilterLAV interface to allow opening URLs with custom user agent and referrer NEW: Added support for WebP images Changed: Increased the length of the advanced subtitle selection field, so its no longer cut off after 255 characters Changed: Improved buffering behavior on badly interleaved video files Fixed: Audio streams with an unknown/unsupported codec are no longer selected for playback, as long as others are present Fixed: Improved accuracy of reported FPS from AviSynth scripts LAV Video NEW: D3D11 support for HEVC 4:2:2 and 4:4:4 hardware decoding NEW: Dolby Vision extension metadata is exported for renderers to use Changed: Added additional media types to support more video streams Changed: Updated dav1d for significant AV1 decoding improvements Fixed: Improved handling of H.264 4:4:4 files encoded by certain versions of x264 Fixed: VP9 DXVA2/D3D11 decoding could result in artifacts on some clips Fixed: Decoding ProRes reports more accurate color details LAV Audio Changed: Added support for additional ADPCM audio codecs Download: LAV Filters 0.80.0 | 15.5 MB (Open Source) View: LAV Filters Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Haven't really used it much for years, not specific to Windows 11.. it's there but I mostly ignore it. I do install StartAllBack though bust mostly for the other bits that it brings. I prefer the "alt-space" type launchers (KRunner in Plasma, Flow in Windows or the like), a lot less clutter and more smarts like bookmark/history searches and other useful plugins.
  • Recent Achievements

    • First Post
      emptyother earned a badge
      First Post
    • Week One Done
      Crunchy6 earned a badge
      Week One Done
    • One Month Later
      KynanSEIT earned a badge
      One Month Later
    • One Month Later
      gowtham07 earned a badge
      One Month Later
    • Collaborator
      lethalman went up a rank
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      675
    2. 2
      ATLien_0
      277
    3. 3
      Michael Scrip
      220
    4. 4
      +FloatingFatMan
      168
    5. 5
      Steven P.
      161
  • Tell a friend

    Love Neowin? Tell a friend!