4

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.

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
Tom Regan
  • 3,580
  • 4
  • 42
  • 71

1 Answers1

4

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

Community
  • 1
  • 1
Tom Regan
  • 3,580
  • 4
  • 42
  • 71
  • Interesting. I suppose it makes sense though. Given that the main point of the bundler is to combine all the listed files into one file, there's little point in supporting `@include`. – Chris Pratt Dec 19 '14 at 17:06
  • Yup, I had the same issue, and my solution was to get a list of all of the @import'd jQueryUI files, and add each of them into a bundles.Add() statement. https://stackoverflow.com/a/45083177/391605 – Mike Gledhill Jul 13 '17 at 14:12