捆绑样式不起作用，但直接链接标签有效答案

【问题标题】：Bundling Styles doesn't work, but straight Link tag works捆绑样式不起作用，但直接链接标签有效
【发布时间】：2013-12-13 21:03:54
【问题描述】：

在我的 _Layout 页面中，以下作品：

<link rel="stylesheet" href="@Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css")"             />
<link rel="stylesheet" href="@Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css")"           />
<link rel="stylesheet" href="@Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css")"            />
<link rel="stylesheet" href="@Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css")"   />

这不起作用（样式会被应用，但是 css 中引用的图像不会呈现）：

@Styles.Render("~/bundles/kendoStyle")

这是 App_start 中的 Bundle def -> BundleConfig.cs：

        //Kendo Styles:
        bundles.Add(new StyleBundle("~/bundles/kendoStyle").Include(
          "~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css"
        , "~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css"
        , "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css"
        , "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css"
            //, "~/Kendo/Content/contextMenu.css"
        ));

我在这里做错了什么？（请注意，“Kendo”在我的主网站下设置为 mvc4.5 网络应用程序

【问题讨论】：

标签： asp.net-mvc kendo-ui bundle

【解决方案1】：

图像路径相对于样式表所在的文件夹。例如，可能会这样引用图像：

.k-icon {
  background-image: url('BlueOpal/sprite.png');
}

因为您的包重新定义了样式表的路径，所以浏览器会尝试从 ~/bundles/BlueOpal/sprite.png 下载图像，但该文件并不存在。图片的实际路径是~/Kendo/Content/kendo/2013.2.918/BlueOpal/sprite.png。

当您直接链接到样式表（没有捆绑包）时，一切正常，因为相对路径正确指向服务器上的图像。但是，由于您的包重新定义了样式表所在的虚拟路径，因此图像的相对路径不再起作用。

如果你想使用一个包，你必须用一个不会破坏样式表中相对图像路径的路径来定义它。在您的情况下，由于 KendoUI 样式表位于 ~/Kendo/Content/kendo/2013.2.918，因此您应该使用相同的路径定义包：

bundles.Add(new StyleBundle("~/Kendo/Content/kendo/2013.2.918/bundle").Include(
    "~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css",
    "~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css",
    "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css",
    "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css"
));

希望对你有帮助。

【讨论】：

很好的解释！但是，当我进行更改时，样式会完全消失。不过我敢肯定我们真的很亲近。 2个提醒，一个，“剑道”是我主要网站下的“网络应用程序”（我认为这不重要）。其次，通过 F12 -> “network tap”，我看到新捆绑包收到 404-not found 响应。此外，当我返回到我的原始包 def（只有图像无法加载）时，使用 F12，我手动输入“~/Kendo/Content/kendo/2013.2.918/BlueOpal/sprite.png 以使其工作（路径前没有“/”的图片无法加载）
好的，事情变得有趣了；所以“剑道”是我网站下的一个虚拟目录/网络应用程序。这里有一个链接说捆绑名称和目录结构应该是不同的：stackoverflow.com/questions/15540528/… 我想这是一个完整的展示停止器，将 Kendo 作为我的网站下的 Web 应用程序添加并使用捆绑加载它？那真是太可惜了
这绝对是解决客户端或服务器端呈现不同问题的绝佳答案！
@Kevin Babcock 五年后，您的回答仍然有助于解释为什么 Kendo 样式表中的图像在捆绑时无法加载。在原始根文件夹中创建捆绑包解决了我的问题。谢谢你！

【解决方案2】：

您好，我遇到了同样的问题。但我看到该页面能够获取精灵文件，但没有显示一些符号。临时解决方案将捆绑包 EnableOptimizations 属性设置为 false。

BundleTable.EnableOptimizations = False

【讨论】：