Bundle Transformer for LESS and use of @import

Question

I am using version 1.7.27 of the Bundle Transformer: LESS package here: http://www.nuget.org/packages/BundleTransformer.Less/1.7.27

I am then attempting to do the below in an MVC4 project's BundleConfig.cs file in App_Start.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new StyleBundle("~/Content/fontawesome")
        .Include("~/Content/less/fontawesome/font-awesome.less"));
    BundleTable.EnableOptimizations = true;
}

By default the Font Awesome less package has these @imports in the font-awesome.less file

@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "bootstrap.less";
@import "extras.less";
@import "icons.less";

The files are in the same directory as the font-awesome.less file.

The bundling kicks in and shows like this:

<link href="/Content/fontawesome?v=D2n9lw_SpgOm7QSYHjToA3En_lqvKQpP2DbfM_CElpc1" rel="stylesheet"/>

but the @import files all return a 404 not found error, I kind of thought that the @import rules would have been processed first from their relative location to the original file, before the bundling was performed..

Am I missing something?

Answer 1

Just because you grabbed the Nuget package for the bundle transformer doesn't mean that it will transform when using the OOB StyleBundle... You have to inject in the BundleTransformer classes into the pipeline. I actually covered this in a series I had on my blog - .ToString(theory); - Who could ask for more with LESS CSS.

As you can see about a third of the way into the article, I declare a new Bundle and add the CssTransformer to it. Post back if you have any further questions, but that article covers implementation of the Bundle Transformer from start to finish in MVC4