0

My question is similar to this:

mvc bundling and relative css image when website is deployed to an application

MVC4 StyleBundle not resolving images

Summery:

When working with relative links in css the links will be broken after bundling.

Example:

Original:

.flags {
  background-image: url("../images/flags.png");
}

request to server:

GET https://{HOST}/myapp/images/flags.png 200

After bundling:

.flags {background-image: url("../images/flags.png");}

request to server:

GET https://{HOST}/images/flags.png 404

What i want (after bundling)

.flags {background-image: url("/myapp/images/flags.png");}

or

.flags {background-image: url("images/flags.png");}

my BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace MyApp
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            // CSS
            bundles.Add(new StyleBundle("~/App/bundledCSS")
                .Include("~/App/css/index.css", new CssRewriteUrlTransformWrapper())
               );

            [JS Bundels, ...]
        }
    }

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

in my index.cshtml

@Styles.Render("~/App/bundledCSS")

I tryed the solutions to both but got no working result

Other Resources i used:

Change relative URL references to CSS files when bundled

How to set image path in StyleBundle?

Also it would be nice to know if it is possible to use the solution with IncludeDirectory or make it so that all styles in a StyleBundle are affected

Example:

bundles.Add(new StyleBundle("~/App/bundledCSS")
               .IncludeDirectory("~/App/css/other", "*.css", true)
               .IncludeDirectory("~/App/css/lib", "*.css", true);
Philipp
  • 5
  • 2

0 Answers0