Question

I have Font Awesome, Less, Twitter Bootstrap and MVC4 all working nice together in debug mode.

When I deploy and remove debug from the compilation node of the web.config, the MVC4 bundling and minification kicks in.

When I browse my site when deployed like this, the font awesome icons no longer work.

Doing a view source to get the content bundle for Bootstrap gives me this HTML:

<link href="/Content/bootstrap?v=q6mwz5qEMtOzVPXqIVuZ8Z6LtMFDC3_UV0F5pQm5Gfg1" rel="stylesheet"/>

Taking the URL and sticking in the browser I can get the minified code:

@import"reset.less";@import"variables.less";@import"mixins.less";@import"scaffolding.less";@import"grid.less";@import"layouts.less";@import"type.less";@import"code.less";@import"forms.less";@import"tables.less";@import"font-awesome.less";@import"dropdowns.less";@import"wells.less";@import"component-animations.less";@import"close.less";@import"buttons.less";@import"button-groups.less";@import"alerts.less";@import"navs.less";@import"navbar.less";@import"breadcrumbs.less";@import"pagination.less";@import"pager.less";@import"modals.less";@import"tooltip.less";@import"popovers.less";@import"thumbnails.less";@import"media.less";@import"labels-badges.less";@import"progress-bars.less";@import"accordion.less";@import"carousel.less";@import"hero-unit.less";@import"utilities.less";@import"variables.less";@import"mixins.less";@import"responsive-utilities.less";@import"responsive-1200px-min.less";@import"responsive-768px-979px.less";@import"responsive-767px-max.less";@import"responsive-navbar.less";

I have a couple of other CSS bundles as well, none of them show any errors when viewed like above.

When I look at the font-awesome.less file in my Visual Studio 2012 project, there are a number of errors that VS thinks it has. Remember Font Awesome icons show up fine in debug, so I don’t think there are really errors.

The first one is on: @fontAwesomePath: ‘../font’;

The path is correct I think (works in debug anyway), but VS tells me fontAwesomePath is not a known @ directive.

There are numerous other errors that VS think exist as well, but again, font awesome works in debug mode.

Any ideas?

Answer 1

I ran into a similar problem with TinyMCE. When MVC packages the javascript into a bundle the resulting javascript threw an exception.

BundleTable.EnableOptimizations = false;

If you put that line in your RegisterBundles function in the BundleConfig class, that will turn off the bundle and let your site work in production. It won’t minimize your javascript automatically but at least stuff will start working.

You could them minimize each javascript file manually to get the smallest footprint and hopefully find your problematic js file.