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

这有效，但只有当我设置

This works, but only when I set

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.

推荐答案

根据这个答案，默认的 minifier 根本不支持 @import 指令:

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

MVC4 捆绑 CSS 失败 Unexpected token, found '@import'

另外，jquery-ui css文件中包含了图片的相对路径，所以bundle的虚拟路径必须允许浏览器找到图片的相对路径，例如:

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 无法解析图像

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