在我的_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 -> 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”在我的主网站下设置为 mvc4.5 Web 应用程序
最佳答案
图像路径相对于样式表所在的文件夹。例如,可以像这样引用图像:
.k-icon {
background-image: url('BlueOpal/sprite.png');
}
由于您的 bundle 重新定义了样式表的路径,因此浏览器会尝试从 ~/bundles/BlueOpal/sprite.png 下载图像,但该图像并不存在。图像的实际路径是~/Kendo/Content/kendo/2013.2.918/BlueOpal/sprite.png。
当您直接链接到样式表(没有 bundle )时,一切正常,因为相对路径正确指向服务器上的图像。但是,由于您的包重新定义了样式表所在的虚拟路径,因此图像的相对路径不再起作用。
如果您想使用 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"
));
希望对您有所帮助。
关于asp.net-mvc - bundle 样式不起作用,但直接链接标签起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20575959/