ASP.NET MVC CSSrewriteurltransform Multiple Arguments

asp.net mvc cssRewriteUrlTransform multiple arguments

You can't mix both overloads of the Include method:

public virtual Bundle Include(params string[] virtualPaths);
public virtual Bundle Include(string virtualPath, params IItemTransform[] transforms);

If you need the CssRewriteUrlTransform on each of the files, try this:

bundles.Add(new StyleBundle("~/Content/GipStyleCss")
    .Include("~/Content/GipStyles/all.css", new CssRewriteUrlTransform())
    .Include("~/Content/GipStyles/normalize.css", new CssRewriteUrlTransform())
    .Include("~/Content/GipStyles/reset.css", new CssRewriteUrlTransform())
    .Include("~/Content/GipStyles/style.css", new CssRewriteUrlTransform())
);

asp.net mvc cssRewriteUrlTransform multiple arguments

You can't mix both overloads of the Include method:

public virtual Bundle Include(params string[] virtualPaths);
public virtual Bundle Include(string virtualPath, params IItemTransform[] transforms);

If you need the CssRewriteUrlTransform on each of the files, try this:

bundles.Add(new StyleBundle("~/Content/GipStyleCss")
    .Include("~/Content/GipStyles/all.css", new CssRewriteUrlTransform())
    .Include("~/Content/GipStyles/normalize.css", new CssRewriteUrlTransform())
    .Include("~/Content/GipStyles/reset.css", new CssRewriteUrlTransform())
    .Include("~/Content/GipStyles/style.css", new CssRewriteUrlTransform())
);

ASP.NET MVC: StyleBundle IncludeDirectory & CssRewriteUrlTransform

As I didn't find a better answer, I'll post my solution (which feels more like a workaround):

public class BundleConfig {
    private class CssRewriteUrlTransformWrapper : IItemTransform {
        public string Process(string includedVirtualPath, string input) {
            //see https://stackoverflow.com/questions/19765238/cssrewriteurltransform-with-or-without-virtual-directory
            return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
        }
    }

    private static string MakeVirtualPath(string fromPhysPath, string withVirtualPath) {
        var res = fromPhysPath.Replace("\\", "/");
        var idx = res.IndexOf(withVirtualPath.Replace("~", ""));
        res = "~" + res.Substring(idx);

        return res;
    }

    private static StyleBundle CreateStyleBundleForDir(string virtualPath) {
        StyleBundle res = new StyleBundle(virtualPath + "/bundle");

        string[] cssFilesPhysical = Directory.GetFiles(HttpContext.Current.Server.MapPath(virtualPath), "*.css", SearchOption.AllDirectories);

        List<string> cssFilesVirtual = new List<string>();
        foreach (var file in cssFilesPhysical) {
            res.Include(MakeVirtualPath(file, virtualPath), new CssRewriteUrlTransformWrapper());
        }

        return res;
    }

    public static void RegisterBundles(BundleCollection bundles) {
        bundles.Add(CreateStyleBundleForDir("~/app/custom"));
    }
}

I'm open for constructive citicism :)

How to avoid CSS and bundling hell?

You have to use CssRewriteUrlTransform at the time of bundling so that relative image paths (relative from css file location) are converted to absolute path from the website root. An example is below:

bundles.Add(new StyleBundle("~/Content/fileinput").Include("~/Content/fileinput/css/fileinput.css", new CssRewriteUrlTransform()));

 

CssRewriteUrlTransform with or without virtual directory

I am not sure to fully understand your problem, but seeing http://localhost here seems wrong. You should never use an absolute URL for your bundles.

For me CssRewriteUrlTransform works perfectly, here is how I use it:

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

"Bundles" is virtual.

Does this helps?

Update

I was confused with the "VirtualDir" thing, as you are talking about IIS VirtualDir, and I was thinking Bundle VirtualDir! It's true that in this case CssRewriteUrlTransform will rewrite URLs to the Host, not to the Host/VirtualDir URI.

To do that, you have to derive CssRewriteUrlTransform to make it do what you need it to.
There is a good discussion here: ASP.NET MVC4 Bundling with Twitter Bootstrap

Seems the best answer is there:http://aspnetoptimization.codeplex.com/workitem/83

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

Use this class instead of CssRewriteUrlTransform

MVC Bundling and CSS relative URLs

CssRewriteUrlTransform updates the CSS Url with absolute path, saying so if we use -

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));

and we have following CSS class in "site.css"

.Sandy
{
    background-image: url("Images/Sandy.jpg");
    border: 1px solid #c8c8c8;
    border-radius:4px 4px 4px 4px;
    box-shadow: 1px 1px 8px gray;
    background-position:left;
    background-size:contain;
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-repeat:no-repeat;
    min-height:100px;
    min-width:100px;
    display:block;
}

and following folder structure -

   -Web site Root
   -Content
   --site.css
   --Images
   ---Sandy.jpg

Bundling will generate following CSS Url Path for "background-image" -

 background-image: url("/Content/Images/Sandy.jpg");

And now if you hosting the website / web application as a website on web server above path will work,
because browser will send request for this resource using following Url because of leading '/'

http://<server>/content/images/sandy.jpg

but if you host the website as web application this will create problem. Because browser will still interpret this as absolute Url instead of relative and still send following request to fetch this resource -

   http://<server>/content/images/sandy.jpg

So, the solution for this problem is using the relative Url even in CSS file and then remove the CssRewriteUrlTransform from the Bundle config as below -

background-image: url("Images/Sandy.jpg");

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

Asp.net Error while trying to create a bundle - Only application relative URLs (~/url) are allowed

~Vendor/lib/animate/animate.min.css is not a legal relative URL. It needs to be ~/Vendor/lib/animate/animate.min.css

---

Related Topics