Running my MVC4 app in debug mode (so no minification of css/scripts) works fine. As soon as I run without debug (css/scripts minified), my Twitter Bootstrap icons do not get displayed. Another thread on here suggested using bundles.IgnoreList.Clear(). But that does not seem to work for me. My BundleConfig.RegisterBundles(…) looks like this:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
// Some JavaScript bundles only
// ...
bundles.Add(new StyleBundle("~/bundles/maincss").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/my.css"));
}
}
All packages were installed using Nuget (as I say, it works fine in debug mode). My Content folder also contains the minified versions of both the bootstrap…css files, but not a minified version of my.css. The glyph icons are in the images sub-folder.
My _Layout.cshtml looks like this:
<head>
...
@Styles.Render("~/bundles/maincss")
</head>
I should add, that by "non-debug" mode, I mean setting the debug="false" option in the Web.config file:
<compilation debug="false" targetFramework="4.5" />
Does anyone have any idea why the twitter bootstrap icons do not show in "non-debug" mode?
Thanks
Rob
Best Answer
I'm on mobile so my apologies for brief response but I'll update later.
Read this
Long story short it had to do with relative path being fouled after bundling. But the good news is the latest bundle library resolves it.
Update
To fill in the blanks, essentially what's happening is that the CSS files have relative paths to resources (in this case an icon sprite). When in debug mode, the files are output separately to the page so the references are retained (
/Content/bootstrap.css
with a reference toimages/glyphicons-halflings.png
(making the full path/Content/images/glyphicons-halflings.png
). However, when debug is removed the files are bundled and the path is now relative to whatever virtual path you gave your bundle. In the case of above, you now originate from/bundles/maincss
which makes for an erroneous/bundles/maincss/images/glyphicons-halflings.png
path.The good news is that this was a resolved bug and as of
Microsoft.AspNet.Web.Optimization
v1.1.0 you now haveCssRewriteUrlTransform
that will replace all relative paths (within the CSS files) with their absolute-pathed counterpart. This means that no matter what you call the bundle, the resources will still be resolved.So, to fix the issue, you can simple do the following:
My only qualm is how ugly this looks when you want multiple files, so to solve this you can simplify it with an extension method:
Which makes the above code a little cleaner. (Arguably I picked a long method name, but I like to keep the method names clear with regards to purpose)