3

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?

Pricey
  • 5,799
  • 12
  • 60
  • 84
  • what does firebug or fiddler show the path it's attempting for those files? maybe that will clue you in. – Eonasdan Sep 10 '13 at 13:08
  • @Eonasdan The path it is attempting to use is `/Content/variables.less`. I understand why I am getting the 404 error at the moment, I was expecting the bundling to be able to handle multiple levels of @import rules inside less files, since Font-Awesome is an external dependency and I don't want to change it. – Pricey Sep 10 '13 at 13:15
  • I use bootstrap (less) a lot. I've used dotlesscompiler and Twitter's less compiler as command line build events. I seems like the first time I tried to use the bundler to compile less files, it didn't work very well. – Eonasdan Sep 10 '13 at 13:58
  • 2
    See if this helps: http://stackoverflow.com/questions/14595405/404-errors-on-bundled-jquery-css-vs2012-publishing-to-azure/14595525#14595525 -- like if you change your bundle name to `~/Content/less/fontawesome/css` – MikeSmithDev Sep 10 '13 at 14:04
  • @MikeSmithDev your comment about the bundle path fixes my problem. I mistakenly ignored these virtual paths, but they are relevant to the location of the import. I now have another problem with the ordering of the imports because the less is not being compiled in the correct order and so is returning a 500 error, I will look at the new answer for guidance. – Pricey Sep 10 '13 at 14:38

1 Answers1

6

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

tostringtheory
  • 877
  • 8
  • 19
  • I am pretty sure the Bundle Transformer package uses the CssTransformer by default for StyleBundles.. my problem was the virtual paths were incorrect. I now have a problem with processing the imports in their original order :-/ – Pricey Sep 10 '13 at 14:40
  • I have tried using a `NullOrderer` for these and they still show a compilation error for the Less files – Pricey Sep 10 '13 at 15:11
  • I would double check that it is actually working the way you think it is.. Is it really doing a LESS transformation to the bundle without your having told it to do so? You can test this by doing a test CSS class declaration after your imports, and put a LESS function in it, see if it actually ends up being CSS. The `NullOrderer` is for the multiple files you include in a bundle, not for the actual order of `@import`'s done in the actual CSS. – tostringtheory Sep 10 '13 at 16:01
  • See, even the [documentation](http://bundletransformer.codeplex.com/wikipage?title=Bundle%20Transformer%201.8.0#BundleTransformerLess_Chapter) for the Bundle Transformer declares a Bundle and sets the transformer. Yes, the default transformer to use is `CssTransformer`, but the `StyleBundle` from the framework doesn't know that, unless the Bundle Transformer is doing some type of interception I don't know about. – tostringtheory Sep 10 '13 at 16:04
  • The addition of a `CssTransformer` fixed the problem with the ordering. I have seen that the bundle transformer documentation shows the use of a `CssTransformer` but it was with a `Bundle` not a `StyleBundle`, after checking msdn the description of a `StyleBundle` is `Represents a bundle that does CSS minification`. Its strange to me that the MVC4 default project does not apply a CssTransformer, and I am also confused as to why this is required to make the ordering work but only because I have not read up on it. – Pricey Sep 10 '13 at 16:24
  • Because by default MVC has no idea what LESS is, that's what the Bundle Transformer is for. All MVC does out of the box is the bundling and minification. When you got the bundle transformer, you had to tell the Bundle engine to use it. Since the `StyleBundle` that is OOB doesn't have that feature, that's why you have to build a new bundle up with the necessary transformer. – tostringtheory Sep 10 '13 at 18:36
  • Now instead of a `System.Web.Optimization.StyleBundle` class, you can use `BundleTransformer.Core.Bundles.CustomStyleBundle` class. `CustomStyleBundle` class uses `StyleTransformer` (class `CssTransformer` is deprecated ) as transformation by default and NullBuilder as builder by default. – Andrey Taritsyn Sep 26 '14 at 09:24