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文件添加到包中。
但我很好奇：为什么all.css在捆绑和缩小css文件时会中断？
这似乎不是浏览器特定的，因为我在 IE9中都有同样的问题和 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

BundleTable.EnableOptimizations true会破坏jquery-ui all.css

1 个答案: