在我的布局页面中,以下工作:
<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->BundleConfig.cs:中的Bundle def
//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"是在我的主网站
图像路径是相对于样式表所在的文件夹的。例如,一个图像可能被引用如下:
.k-icon {
background-image: url('BlueOpal/sprite.png');
}
因为您的bundle重新定义了样式表的路径,所以浏览器尝试从~/bulles/BlueOpal/sprite.png下载图像,但该图像不存在。图像的实际路径是~/Kendo/Content/Kendo/2013.2.918/BlueOpal/sprite.png.
当您直接链接到样式表(没有捆绑包)时,一切都很好,因为相对路径正确地指向服务器上的图像。但是,由于束重新定义了样式表所在的虚拟路径,因此到图像的相对路径不再有效。
如果要使用bundle,则必须使用不会破坏样式表中相对图像路径的路径来定义它。在您的情况下,由于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"
));
我希望这能有所帮助。
嗨,我也有同样的问题。但我看到页面能够获得精灵文件,但没有显示一些符号。临时解决方案已将bundle EnableOptimizations属性设置为false。
BundleTable.EnableOptimizations = False