MVC jQuery UI CSS url 部署后无法解析答案

【问题标题】：MVC jQuery UI CSS urls not resolving after deploymentMVC jQuery UI CSS url 部署后无法解析
【发布时间】：2015-06-11 15:05:23
【问题描述】：

标题几乎说明了一切。在 jquery-ui.css 中，它定义了如下样式：

ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*
color: #222222/*{fcContent}*/;
}

这在 dev 中运行良好，但一旦部署，url 不再解析。该站点部署在 IIS7 中的默认网站下。所以在浏览器控制台中，我可以看到它在

中寻找图像

http:// (servername)/(appName)/Content/images/ui-bg_glass_75_e6e6e6_1x400.png

而不是

http:// (serverName)/(appName)/content/themes/base/images...

这是捆绑配置：

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/themes/base/jquery-ui.css",
            "~/Content/site.css"
));

如何使这些 URL 正确解析？

【问题讨论】：

您是否捆绑了 CSS 文件？
是的，它们都是捆绑在一起的。
你能发布你的 BundleConfig 的相关部分吗？
已在 OP 中更新。
为什么不在 HTML 中使用 <base> 标签？

标签： css asp.net-mvc-4

【解决方案1】：

Ufuk 的回答让我开始思考。将应用程序名称附加到包的虚拟路径的前面破坏了我所有的样式。

bundle 函数获取 include 语句中的所有 CSS 文件，并将它们压缩到一个文件中，该文件位于 bundle 的虚拟路径中指定的 URL 处。此捆绑包中包含的 CSS 文件中指定的 url 使用捆绑包的给定虚拟路径在运行时构建其 URL。这在 dev 中运行良好，因为 dev 不使用捆绑包，它单独/直接引用每个 css 文件。

解决方案是使用正确的虚拟路径创建一个包：

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery-ui.css")):

感谢 Ufuk 的建议和指导。

【讨论】：

请注意，样式包虚拟路径应该与实际位置不同......这让我卡了几分钟。
为了确认，您绝对不应该使用文件夹路径的实际文件作为捆绑名称。这将导致 IIS 尝试加载目录或文件而不是包。

【解决方案2】：

你应该像这样更新你的包的虚拟路径：

bundles.Add(new StyleBundle("~/appName/Content/css").Include(
            "~/Content/themes/base/jquery-ui.css",
            "~/Content/site.css"
));

这样，您的 CSS 文件中的相对 URL 将从 ~/appName 开始。如果您在 site.css 文件中有其他相对 URL，请记住这一点。

【讨论】：

【解决方案3】：

在我使用 nuGet 包管理器将我的解决方案更新到最新的 jqueryui -files 1.11 版后，jqueryui 的 css 文件没有被加载。所以我检查了 BundleConfig 类只是为了注意到 jqueryui css 仍在使用旧路径，例如：
“~/Content/themes/base/jquery.ui.theme.css”
我将它们替换为：
“~/Content/themes/base/theme.css”
然后我的页面又恢复了营业。

【讨论】：