BundleTable.EnableOptimizations true中断jquery-ui all.css [英] BundleTable.EnableOptimizations true breaks jquery-ui all.css

问题描述

在Asp.Net MVC 5应用程序中，我在egisterBundles方法中创建样式束.
我正在使用jquery-ui.
而不是列出所有jquery-ui我分别使用css文件，而all.css则将其余所有文件导入.
代码看起来像这样:

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"));

all.css包含两行:

And all.css contains two lines:

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

这有效，但仅在我设置

BundleTable.EnableOptimizations = false.

设置后

BundleTable.EnableOptimizations = true

然后没有jquery css加载.

then none of the jquery css loads.

当然有一个简单的解决方法；我可以单独将jquery-ui css文件添加到捆绑包中.
但是我很好奇:为什么在打包和缩小css文件时all.css会中断?
这似乎不是特定于浏览器的，因为我在两个 IE9中都存在相同的问题和 Chrome 39 .

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.

推荐答案

根据此答案，默认的缩小器根本不支持@import指令:

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

MVC4捆绑CSS失败意外令牌，找到'@import'

此外，jquery-ui css文件包含图像的相对路径，因此捆绑软件的虚拟路径必须允许浏览器找到图像的相对路径，例如:

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]));

在cshtml页面上:

And on the cshtml page:

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

请参见以下链接以进行说明: MVC4 StyleBundle无法解析图像

See this link for explication: MVC4 StyleBundle not resolving images

这篇关于BundleTable.EnableOptimizations true中断jquery-ui all.css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！