ASP.NET MVC framework 4.5 CSS bundle does not work on the hosting

I am runing an App on app harbor written in MVC4.

A bundle of css files doesn't work. In my local computer in debug mode I see the code of the App and I see the files. The App works as expected.

<link href="/Content/css/home/basic-jquery-slider.css" rel="stylesheet"/>
<link href="/Content/css/home/Home.css" rel="stylesheet"/>

When I upload the app to Appharbor I see the bundle in the code but the App doesn't work.

<link href="/Content/css/home?v=zhVOIpUNuvCOZhJyBcQWpMlozayor4te6k-pM29wHqI1" rel="stylesheet"/>

When I browse that link in the href I get 403 - Forbidden: Access is denied.

How to troubleshoot this?

My guess is that the path Content/css exists on disk in your app. In this case IIS would be handling the request, not MVC.

Make sure that the virtual path for the bundle (the parameter of the StyleBundle constructor) doesn't match a folder in the file system.

From the comments:

"A good convention to follow when creating bundles is to include "bundle" as a prefix in the bundle name. This will prevent a possible routing conflict."

This issue is by default .NET does not "process" requests that have a .js or .css extension.

There are two fixes for this (you only need to do ONE)

A) Remove the extensions from the bundle names. (recommended) This will cause .NET to process the request and run it through the BundleModule.

B) Add this to your web.config in the system.webServer section which will cause .NET to run .js and .css requests through the BundleModule.

<modules runAllManagedModulesForAllRequests="true">
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

Big shout out to Ray Moro who figured out the actual cause and shared it with me on my blog: http://blog.cdeutsch.com/2012/11/fixing-404-errors-for-aspnet-mvc-apps.html