Bundling Styles doesn't work, but straight Link tag works

Question

In my _Layout page, following works:

<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")"   />

This doesn't work (the styles do get applied, however images referenced in the css don't render):

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

here's the Bundle def in App_start -> 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"
        ));

What am I doing wrong here? (please note, "Kendo" is setup as an mvc4.5 web app under my main website

Kevin Babcock Kevin Babcock · Accepted Answer · 2013-12-15T11:28:41

Image paths are relative to the folder in which styesheets are located. For example, an image might be referenced like this:

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

Because your bundle redefines the path to your stylesheets, the browser attempts to download the image from ~/bundles/BlueOpal/sprite.png, which doesn't exist. The actual path to the image is ~/Kendo/Content/kendo/2013.2.918/BlueOpal/sprite.png.

Everything works fine when you link to your stylesheets directly (without the bundle) because relative paths correctly point to images on your server. However, because your bundle redefines the virtual path in which the stylsheets are located the relative paths to images no longer work.

If you want to use a bundle you must define it with a path that will not break relative image paths in the stylesheets. In your case, since the KendoUI stylesheets are located at ~/Kendo/Content/kendo/2013.2.918, you should define the bundle with that same path:

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

I hope that helps.

Bundling Styles doesn't work, but straight Link tag works

2 Answers