BundleTable.EnableOptimizations true breaks jquery

Question

In an Asp.Net MVC 5 application, I am creating a style bundle in my egisterBundles method.
I'm using jquery-ui.
Instead of listing all of the jquery-ui css files individually I'm using all.css, which imports all the rest.
The code looks like this:

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

And all.css contains two lines:

@import "base.css";
@import "theme.css";

This works, but only when I set

BundleTable.EnableOptimizations = false.

When I set

BundleTable.EnableOptimizations = true

then none of the jquery css loads.

Of course there is an easy workaround; I can individually add the jquery-ui css files to the bundle.
But I am curious: why does all.css break when the css files are bundled and minified?
This does not appear to be browser-specific, as I have the same problem in both IE9 and Chrome 39.

Answer 1

According to this answer the default minifier simply does not support the @import directive:

MVC4 bundling CSS failed Unexpected token, found '@import'

Also, the jquery-ui css files contain relative paths to images, so the virtual path of the bundle must allow the browser to find the relative path to the images, for example:

bundles.Add(new StyleBundle("~/Content/themes/base/jqueryui")
   .Include("~/Content/themes/base/core.css" [and other desired css files]));

And on the cshtml page:

@Styles.Render("~/Content/themes/base/jqueryui")

See this link for explication: MVC4 StyleBundle not resolving images