CSS relative urls do not work when bundling in visual studio

Question

In a css file i have this:

.social-icons li .facebook {
  background: url(../img/social/facebook.png) no-repeat;
}

The img directory is indeed in "../" compared to the css file.

Everything works ok if i include the css with normal markup in my _Layout.cshtml.

But if i use bundling:

bundles.Add(new StyleBundle("~/bundles/core-styles").Include(
        "~/assets/global/frontend/css/components.css"));

it breaks all images.

Is there any way to use bundling AND have correct images without of course touching the components.css?

score 1 · Accepted Answer · answered Dec 22 '14 at 12:26

You can use CssRewriteUrlTransform when including the bundle:

bundles.Add(new StyleBundle("~/bundles/core-styles")
    .Include("~/assets/global/frontend/css/components.css", new CssRewriteUrlTransform()));

That class rewrites the URLs in the file to be absolute and it will fix your problem.

1 Answers1