Relative path transformations in CSS bundles

Question

I'm trying to bundle the CSS files for my MVC5 project and I'm running into a problem with relative URLs. Before you mash the duplicate question button, I've read other similar questions and the answers haven't dealt with the particular situation I need to handle.

The project I'm working on will be run as an application under a regular IIS site, meaning it won't sit at the root of the domain. This is a problem when using the out-of-the-box URL transform CssRewriteUrlTransform() as it (stupidly, in my humble opinion) doesn't take into account the application name in the URL, instead it generates absolute paths treating the domain root as the starting level. Say I have the following folder structure:

site
'--- content
     |--- css
     |    '--- style.css
     '--- images
          '--- logo.png

If I use a relative URL like this:

background-image: url('../images/logo.png');

It gets transformed to:

background-image: url('http://domainname.com/content/images/logo.png');

The problem is, I need it to respect the application/subdirectory name when it does the transform. The solution should also preserve query strings.

background-image: url('http://domainname.com/applicationname/content/images/logo.png[?querystring]

The closest I've found is the solution offered by AcidPAT on this question: MVC4 StyleBundle not resolving images

But that solution doesn't compile for me, as it seems to treat response.Files as an IEnumerable when in fact it's an IEnumerable - maybe this changed from MVC4 to MVC5.

Summary

I need a means of automatically transforming relative paths in my CSS into absolute paths when bundling them. The solution needs to understand the actual location of the application, so it should work if the application is installed under a subdirectory of the domain. The solution also needs to preserve any query strings from the relative URL.

Can anyone provide some guidance on this?

The closest solution is this gist: https://gist.github.com/dotnetchris/3d1e4fe9b0fa77eefc82 with the only problem being that it seems to be incompatible with MVC5. Specifically the block starting at line 12 which begins to iterate through the list of BundleFile objects seems to be treating them as FileInfo objects and therefore calls to non-existent properties are being made.

score 7 · Accepted Answer · answered Dec 09 '14 at 19:22

I believe this could be a bug with CssRewriteUrlTransform. It will resolve the host but not the virtual directory. This is what I use instead. It's just a wrapper class that allows the bundling process to resolve correctly.

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
    }
}

Usage...

bundles.Add(new StyleBundle("~/Content/css")
       .Include("~/Content/Site.css", new CssRewriteUrlTransformWrapper()));

Remember that the url in the css must be wrapped into quotes — Phate01, Aug 02 '16 at 15:20

Relative path transformations in CSS bundles

1 Answers1