Image paths in CSS files incorrect when bundled

[RudeySH]

Relative paths in CSS files tend to cause problems with ASP.NET bundling, because ASP.NET can place the bundled CSS file in a different folder than where the original CSS files came from, without moving the images or patching the image paths.

Dynamic Bundles generates bundles that are placed on the root of the web site, while the images remain in the "Views/{Controller}/{Action}" folder, without patching the relative image paths.

It may seem Dynamic Bundles works at first, but that's because bundling & minimization only happens in Release mode, or when BundleTables.EnableOptimizations is explicitly set to true.

To fix it, these are some of the options available:

1. Ensure the bundles are placed in the same folder as the original CSS file(s). This will not work if the bundle consists of multiple CSS files that are not all in the same folder.
2. Use CssRewriteUrlTransform. See this thread on StackOverflow, it does not work when your application is running in an IIS virtual directory.
3. Use a custom IBundleTransform implementation or an extended StyleBundle class that patches the relative image paths.

If the CSS bundles that Dynamic Bundles generate always consist of CSS files that come from the same folder, option 1 seems to be the easiest solution. If not, for the sake of completeness I'd say skip option 2 and go for the custom implementation. This seems like a good start.