Using .less{} (dotless) with MVC4 Web Optimization

2Comments

I have been searching long and hard for how to find a way to preserve most of the Web.Optimization capabilities in MVC4 when using less to build my CSS.  I found a post by Ben Cull that got me MOST of the way.  Essentially there are a few easy steps that you need to take in order to enable this.  The primary change that I made was to turn on minification if I was running in DEBUG mode vs RELEASE.\

Steps to get less transforms working with Web Optimization...

  1. Install the BundleTransformer.less package from nuget.
    1. Using this... "Install-Package BundleTransformer.Less" in the Package Manager Console
    2. Once this installs it will pop-up a new open file with some modifications that you need to make to the web.config of your project.
  2. The rest is in code and I'll post below.  Some of this is from Ben Cull and some is the modifications that I have made...  I'm only including my less bundle which is what I have modified.  All the other bundling techniques work just fine in my situation.

 

public static void RegisterBundles(BundleCollection bundles)
     {

            BundleTable.EnableOptimizations = true; //Comment or un-comment this line to force bundling/minification in a project so you can see how it will behave at release.

            var cssTrans = new CssTransformer();

            var cssMin = new CssMinify();

            var nullOrdered = new NullOrderer();


            var siteLess = new StyleBundle("~/Content/less/siteLess").Include(

                "~/Content/less/bootstrap.less",

                "~/Content/less/responsive.less",

                "~/Content/less/site.less");

            siteLess.Transforms.Add(cssTrans);

#if !DEBUG

            siteLess.Transforms.Add(cssMin);

#endif

            siteLess.Orderer = nullOrdered;

            bundles.Add(siteLess);
     }

I have removed all the non relevant bundles that I have enabled on the site I'm working on.  Simply retain what you have add the transform variables at the start of your method and you should be good to go!

By Jared on January 19, 2013 at 12:15 PM
Tagged: , , , , , , ,

Comments (2) -

Reply
John Palmer
John Palmer
4/22/2013 6:01:32 PM #

I think you may have mistyped your blog post. var siteLess should be a Bundle, not StyleBundle.  StyleBundle won't process Less and the CSS transform is redundant.  Processing Less as a generic Bundle allows the CSS and Less transformers to do their work.

Reply
Jared
Jared
4/28/2013 4:06:14 PM #

John, thanks for the comment.

I haven't actually noticed any functionality difference between Bundle & StyleBundle in my usage tests that I've done.

I have found the explicit CSS transforms to be necessary based on my usages.  This may be due to the fact that my bundle names don't use extensions (I prefer this so that it's easy to pick a bundle vs. flat file).

It's always possible that I'm doing something incorrect elsewhere, but the above code is what I currently have in place and is functioning.

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About the author

Something about the author

Month List

Page List