BundleTable.EnableOptimizations true breaks jquery-ui all.css
In an Asp.Net MVC 5 application, I create a styleset in my method egisterBundles
.
I am using jquery-ui
.
Instead of listing all the jquery-ui
css files individually, I use all.css
which imports everything else.
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 install
BundleTable.EnableOptimizations = false.
When I install
BundleTable.EnableOptimizations = true
then none of the jquery css is loaded.
There is of course an easy workaround; I can individually add jquery-ui css files to the bundle.
But I'm curious: why does all.css break when the css files are linked and minified?
It doesn't look like a browser as I have the same problem in both IE9 and Chrome 39.
source to share
As per this answer, the default minifier just doesn't support the @import directive:
MVC4 fails with error Unexpected token found "@import"
Also, jquery-ui css files contain relative paths to images, so the virtual package path should allow the browser to find the relative path to images, like this:
bundles.Add(new StyleBundle("~/Content/themes/base/jqueryui")
.Include("~/Content/themes/base/core.css" [and other desired css files]));
And in the cshtml page:
@Styles.Render("~/Content/themes/base/jqueryui")
See this link for explanation: MVC4 StyleBundle does not resolve images
source to share