BundleTable.EnableOptimizations true 打破 jquery-ui all.css

Question

在 Asp.Net MVC 5 应用程序中，我在 egisterBundles 方法中创建样式包。
我正在使用 jquery-ui。
而不是列出所有 jquery-ui css 文件我单独使用all.css，它会导入所有其余部分。
代码如下所示：

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

而 all.css 包含两行：

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

这有效，但只有当我设置时

BundleTable.EnableOptimizations = false.

当我设置时

BundleTable.EnableOptimizations = true

然后没有 jquery css 加载。

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

Answer 1

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

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

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

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

在cshtml页面上：

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

请参阅此链接以了解说明：MVC4 StyleBundle not resolving images