Style bundling for MVC4 not using min files

Question

I have 4 files:

• a.css
• a.min.css
• b.css
• b.min.css

they are added to bundle in following way:

bundles.Add(new StyleBundle("~/Content/acss").Include("~/Content/a.css", "~/Content/b.css"));

When running application in debug all is rendered properly:

 <link href="/Content/a.css" rel="stylesheet"/>
 <link href="/Content/b.css" rel="stylesheet"/>

However when running in release I have it rendered in following way:

 <link href="/Content/acss?v=mUdXE7_fXKjICzE_XteIB1Igy6TekX1QFh-BtY6fFUw1" rel="stylesheet"/>

And inside I'm founding:

/* Minification failed. Returning unminified contents. (24,708): run-time error CSS1030: Expected identifier, found '.'

So I have two questions:

1. Why it is not working according to docs online? All information says that it chooses min file if available for release version?
2. How to make it working according to documentation?

Answer 1

I had the exact same issue you had, my solution contained css/js files accompanied by their .min files that I had used Web Essentials to minimize.

If I used the bundles in debug mode, everything would work correctly and all of the individual non-minimized files would be loaded in my app. However, if I set BundleTable.EnableOptimizations = true; then I would get errors because it had trouble minimizing my files.

Based on http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification where it states:

For ASP.NET MVC 4, this means with a debug configuration, the file jquery-1.7.1.js will be added to the bundle. In a release configuration, jquery-1.7.1.min.js will be added. The bundling framework follows several common conventions such as:

Selecting “.min” file for release when “FileX.min.js” and “FileX.js” exist. Selecting the non “.min” version for debug.

I expected it to simply load up my already minimized files and just bundle them. What I believe is implied, but missing in the documentation, is that it will also again minimize my already minimized files, which wasn't working and causing errors in the output.

I found http://aspnetoptimization.codeplex.com/workitem/56 which mentions:

You can skip minification simply by creating bundles with no transform, i.e. don't create ScriptBundles, just normal Bundles.

This turned out to be the answer to my issue. By setting both my ScriptBundle and StyleBundle to just type Bundle, I now get the correct bundling without the minimizing.

In debug, all of my regular css/jss files are loaded indidivually. When I set it to non-debug, everything is bundled and it automatically chooses all of the .min files.