Bundled css link gets a 404 error

Question

I am trying to get bundling to work in ASP.NET MVC 4. I am getting a 404 error from the link generated for the bundled CSS. I have done the following:

Installed the "Microsoft ASP.NET Web Optimization Framework" package via NuGet (v4.0.20710.0)

Created a BundleConfig class in the App_Start dir with the following contents:

using System.Web.Optimization;
namespace BsdAppTemplate.Web_Nancy.App_Start
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/bundles/styles/cvi").Include(
                "~/mainstyles.css"
            ));
        }
    }
}

Added the following to Web.config at site root:

<system.web>
    <compilation debug="false" targetFramework="4.5" />

    <pages>
      <namespaces>
        <add namespace="System.Web.Optimization"/>
        ...
      </namespaces>
    </pages>
</system.web>

Added the following to the head element of my MVC layout file:
```
 @Styles.Render("~/bundles/styles/cvi")
```
Copied the CSS file referenced in BundleConfig ("mainstyles.css") into the root directory of my web project.

When I view the source of a rendered file, I can see the link appears as:

<link href="/bundles/styles/cvi" rel="stylesheet"/>

This link results in a 404 when browsing to it, or viewing the page request in Chrome's network tab.

I have also tried the equivalent on a web form, but I get the same result (404) from the link generated when I add:

<%: Styles.Render("~/bundles/styles/cvi") %>

From you description it seems that you have created `BundleConfig` class "by hand" are you sure that proper `RegisterBundles` method is being called in your `Application_Start` method? — tpeczek, Nov 04 '13 at 14:27
@tpeczek - thanks, that is exactly what I was missing. If you would re-enter this as an answer rather than a comment, I will mark it as the the answer. Also, is there an alternative to setting this up by hand? I was following this blog: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification — rogersillito, Nov 04 '13 at 16:18

score 64 · Answer 1 · edited Mar 22 '15 at 22:23

64

Found this question via google results, but the problem in my case was Windows 2008 needed this in web.config to work when compilation debug=false.

<system.webServer>
  <modules>
    <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
  </modules>
</system.webServer>

It worked fine on Win7 dev machine without this.

edited Mar 22 '15 at 22:23

Mikael Engver

4,634
4
46
53

answered Apr 02 '14 at 03:10

fiat

15,501
9
81
103

1

Thanks, this was exactly the solution that saved my day! – ZiNNED Jun 11 '14 at 20:05
2

This entry was missing in my newly created vs 2015 web api project. Seems like a bug – terjetyl Aug 04 '15 at 10:19
1

What's strange is that on my dev machine, debug=false works fine, but once published to my staging server, this module was required. – LarryBud Jan 28 '17 at 12:40

score 27 · Accepted Answer · answered Nov 04 '13 at 18:39

It seems that you have missed the step in which you apply your configuration by calling RegisterBundles in Application_Start:

protected void Application_Start()
{
    ...
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    ...
}

Usually in cases where the BundleConfig class is already there (either as a part of the project template or created by NuGet package during the installation) this call is also already present - this is why many tutorials are implicit about it.

You should also be aware that the BundleConfig class is there for separation of concerns and in order to keep the Application_Start clean. In simple cases nothing prevents you from registering bundles directly in Application_Start:

protected void Application_Start()
{
    ...
    BundleTable.Bundles.Add(new StyleBundle("~/bundles/styles/cvi").Include("~/mainstyles.css"));

    ...
}

That makes sense - I had started from an empty MVC 4 project, so possibly that excludes the BundleConfig starter code. — rogersillito, Nov 05 '13 at 11:12
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:35

score 13 · Answer 3 · answered Aug 29 '14 at 09:21

I had the same problem that my script bundle suddenly responded with 404. I a solution similar to @fiat answer that I found on this blogpost.

The solution was to remove and add the BundleModule in the modules part section of the system.webServer section.

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

Mohsen Najafzadeh · Answer 4 · 2016-09-12T02:08:27.973

5

I hade same problem (in ASP.Net webform), i resolved my issue with Ignore "bundles/" route in Global.asax :

routeCollection.Ignore("bundles/{*catch}");

edited Sep 12 '16 at 02:08

answered Sep 03 '16 at 05:33

Mohsen Najafzadeh

411
1
6
12

This had me scratching my head for days. Adding this solved my issue too. Thanks Mohsen. – Martin English Feb 09 '19 at 11:54

score 2 · Answer 5 · answered Jun 14 '20 at 23:01

2

If you have this error while using Umbraco don't forget to add also this line to your web.config:

<add key="Umbraco.Core.ReservedUrls" value="~/bundles/" />

answered Jun 14 '20 at 23:01

MrFlo

335
3
8

score 0 · Answer 6 · answered Feb 11 '19 at 23:40

0

All my bundles names starting with "~/bundles/..." were not found in my WebAPI. Adding the line to my RouteConfig.cs class

    routeCollection.Ignore("bundles/{*catch}");

fixed my issue.

answered Feb 11 '19 at 23:40

Florian SANTI

531
1
5
13

score 0 · Answer 7 · answered Mar 21 '21 at 17:33

Figured I'll share what happened to me, when working on my machine I was running with "debug=false" so each individual file was loaded but when pushing to stage/prod I got 404's from the /bundles/styles.

Turns out I has a rewrite rule that was forcing a trailing slash so a request to

/bundles/styles was redirected to /bundle/styles/ which does not exist. Added a exception for the rewrite and now things works just fine.

Bundled css link gets a 404 error

7 Answers7

Linked

Related