My question is similar to this:
mvc bundling and relative css image when website is deployed to an application
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:
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);