Relative paths and Bundle configuration

Question

I have the folowing in my BundleConfig.cs file:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/mainstyle.css",
            "~/Content/layout/style.css", /* <<< HERE, the folder is different */
            "~/Content/bootstrap.css",
            "~/Content/site.css"));

and in the ~/Content/layout/style.css file:

#page {
    width: 1000px;
    margin: 0 auto;
    background: url(images/img04.jpg) repeat-y left top;
}

if we know that the bundle will combine all css in a single one (?!) how would the server see the link of the img04.img (url(images/img04.jpg)), as Content/images/, Content/css/images/ or Content/layout/images?

Answer 1

After some googling on the theme, it appears that the CssRewriteUrlTransform class makes sure that the image urls work from the dynamic bundle css file, like this:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/mainstyle.css",
            "~/Content/bootstrap.css",
            "~/Content/site.css")
           .Include("~/Content/layout/style.css", new CssRewriteUrlTransform()));

If this does not help, but you however would like using bundling, divide your bundling in parts per folder. Put the folder path in the bundle "name", like this new StyleBundle("~[folder_path]/[any word, like 'css' ot whatever you like]"):

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/mainstyle.css",
            "~/Content/bootstrap.css",
            "~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/layout/css").Include(
            "~/Content/layout/style.css"));

Answer 2

This is a common issue when combining files, you either need to:

1. Have server side rewrite rules for those urls.

2. Convert your CSS images to base64 and make the CSS files independent of any external images.

3. Have the combined CSS load from the Content directory, so images/ will be relative to that directory.

4. Update the paths in your CSS files.

5. Have a copy of the images in the "expected" directories. (less maintainable)

For .net applications, as mentioned by serhio, CssRewriteUrlTransform class will dynamically update url references inside the bundled files for the specified includes. Example provided by serhio:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/mainstyle.css",
            "~/Content/bootstrap.css",
            "~/Content/site.css")
           .Include("~/Content/layout/style.css", new CssRewriteUrlTransform()));