37

I'm trying to use the new bundling feature in MVC 4 with Twitter bootstrap and it seems to me like the paths to the glyphicons png-files int the css get's messed up in some way. Heres my code:

 bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css"));


        bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
            "~/Static/Js/jquery-1.7.2.js",
            "~/Static/Js/bootstrap/bootstrap.js",
            "~/Static/Js/cookie/jquery.cookie.js"));

I'm not seeing any icons on buttons and likewise. Am I doing something wrong here? Any suggestions?

Hao Kung
  • 27,364
  • 6
  • 81
  • 93
Pelle
  • 2,579
  • 7
  • 37
  • 48

4 Answers4

38

The issue is most likely that the icons/images in the css files are using relative paths, so if your bundle doesn't live in the same app relative path as your unbundled css files, they become broken links.

We have rebasing urls in css on our todo list, but for now, the easist thing to do is to have your bundle path look like the css directory so the relative urls just work, i.e:

new StyleBundle("~/Static/Css/bootstrap/bundle")

Update: We have added support for this in the 1.1beta1 release, so to automatically rewrite the image urls, you can add a new ItemTransform which does this rebasing automatically.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));
Hao Kung
  • 27,364
  • 6
  • 81
  • 93
  • hao-kung, this doesn't seem to work for me with `font-face` rules. Should it? – flipdoubt Nov 14 '12 at 22:37
  • @flipdoubt can you post an example/repro with what doesn't work? – Hao Kung Nov 14 '12 at 23:23
  • Since this isn't a web optimization tech support forum, should I post it to a particular Microsoft forum that allows me to upload the repro or something? – flipdoubt Nov 15 '12 at 15:21
  • Does it help to know it is a .NET 4.0 project rather than a .NET 4.5 project in IIS Express rather than full-blown IIS? – flipdoubt Nov 16 '12 at 22:39
  • Yep, best place is to file an issue here: http://aspnetoptimization.codeplex.com/workitem/list/advanced – Hao Kung Nov 20 '12 at 18:23
  • @HaoKung: The virtual directory issue has been reported here: http://aspnetoptimization.codeplex.com/workitem/83 but it looks like it hasn't been addressed yet. – Charles Burns Aug 18 '15 at 02:37
  • i had the same issue to access font awesome fonts, for **other solutions** try these links which deals with `StyleBundle` **virtualpath**: [Link 1](http://www.mvccentral.net/story/details/articles/kahanu/stylebundle-403-error-solved) , [Link 2](http://forums.asp.net/t/1774324.aspx?MVC4+css+bundling+and+image+references), [Link 3](http://ericpanorel.net/2013/10/25/font-awesome-4-0-mvc-bundling-and-minification/), [Link 4](http://jameschambers.com/2014/08/adding-some-font-awesome-to-mvc-and-bootstrap/) , hope this helps someone. – Shaiju T Feb 25 '16 at 09:36
  • This did not work for me. Maybe I don't understand it well enough but it seems like bundling is far more trouble than it's worth. Does `CssRewriteUrlTransform` affect .min. files? I suspect that is my problem – Nick.McDermaid Mar 17 '17 at 05:40
26

The 'CssRewriteUrlTransform' works just fine for applications that DOESN'T run on top of a virtual directory.

So, if your app runs on http://your-site.com/ it runs just fine, but if runs on http://your-site.com/your-app/ you'll have 404 for all your images, because the default 'CssFixRewriteUrlTransform' is referencing your images with a '/'.

To solve this issue, i have implemented my own version of 'CssRewriteUrlTransform' like this:

    public class CssFixRewriteUrlTransform : IItemTransform {
    private static string ConvertUrlsToAbsolute(string baseUrl, string content) {
        if (string.IsNullOrWhiteSpace(content)) {
            return content;
        }
        var regex = new Regex("url\\(['\"]?(?<url>[^)]+?)['\"]?\\)");
        return regex.Replace(content, match => string.Concat("url(", RebaseUrlToAbsolute(baseUrl, match.Groups["url"].Value), ")"));
    }

    public string Process(string includedVirtualPath, string input) {
        if (includedVirtualPath == null) {
            throw new ArgumentNullException("includedVirtualPath");
        }
        var directory = VirtualPathUtility.GetDirectory(includedVirtualPath);
        return ConvertUrlsToAbsolute(directory, input);
    }

    private static string RebaseUrlToAbsolute(string baseUrl, string url) {
        if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase)) {
            return url;
        }
        if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase)) {
            baseUrl = string.Concat(baseUrl, "/");
        }
        return VirtualPathUtility.ToAbsolute(string.Concat(baseUrl, url));
    }
}

UPDATE: thanks to superjos who pointed that was another solution out there:

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}
Luís Deschamps Rudge
  • 1,056
  • 1
  • 10
  • 11
  • 3
    In the comments to [this codeplex workitem](http://aspnetoptimization.codeplex.com/workitem/83), user MadBender on Aug 9 at 10:09 AM suggested what it seems a simpler workaround to this problem. – superjos Aug 29 '13 at 15:54
  • this is the answer when using virtual directory, worked for me – Jack M Sep 15 '15 at 10:49
  • Fix now added to my `CssRewriteUrlTransformFixed` in a NuGet package I have up which fixes a bunch of issues in the standard transformer. https://github.com/benmccallum/AspNetBundling – benmccallum Dec 15 '15 at 11:08
5

What you can do is you can go to the customize page and change @iconSpritePath and @iconWhiteSpritePath in the Sprites section and, of course, download the new style.

I've put my images in the folder Content/Images folder and I've changed the path in:

  • /Content/Images/glyphicons-halflings.png
  • /Content/Images/glyphicons-halflings-white.png

Another alternative is to download all the LESS files from github, change the same variables in the variables.less file and recompile the bootrap.less file with a tool like SimpLESS.

LeftyX
  • 34,522
  • 20
  • 128
  • 188
1

Fix for this now added to my AspNetBundling NuGet package which resolves a bunch of other issues in the standard transformer, particularly around using data-uris. Open-sourced on GitHub too.

Just do:

  1. Install-Package AspNetBundling
  2. Replace CssRewriteUrlTransform with CssRewriteUrlTransformFixed
benmccallum
  • 1,009
  • 11
  • 25