0

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?

serhio
  • 28,010
  • 62
  • 221
  • 374

2 Answers2

4

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"));
serhio
  • 28,010
  • 62
  • 221
  • 374
  • Good solution for .net applications, I added your solution to my answer for future references and visitors. – Arbel Mar 21 '14 at 20:58
  • I added also an other solution, because finally the first one didn't work in my case... – serhio Mar 25 '14 at 10:59
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()));
Arbel
  • 30,599
  • 2
  • 28
  • 29