捆绑样式不起作用,但直接链接标记工作

Question

在我的_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( "〜/捆绑/ 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网络应用程序

Answer 1

图像路径相对于styesheets所在的文件夹.例如,图像可能会像这样引用:

.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"
));

我希望有所帮助.