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?

serhio · Accepted Answer · 2014-03-25 10:58:34Z

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

Good solution for .net applications, I added your solution to my answer for future references and visitors.
I added also an other solution, because finally the first one didn't work in my case...

Arbel · Accepted Answer · 2014-03-21 20:57:57Z

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

Have server side rewrite rules for those urls.
Convert your CSS images to base64 and make the CSS files independent of any external images.
Have the combined CSS load from the Content directory, so images/ will be relative to that directory.
Update the paths in your CSS files.
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()));

I still don't understand, what path will be taken by the server in my concrete case?
@serhio For images/ it will be (Location of the combined file)/images/

Collectives™ on Stack Overflow

Relative paths and Bundle configuration

2 Answers 2

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Related