Bundled css link gets a 404 error

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:

  1. Installed the “Microsoft ASP.NET Web Optimization Framework” package via NuGet (v4.0.20710.0)
  2. 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"
                ));
            }
        }
    }
  3. 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>
  4. Added the following to the head element of my MVC layout file:
     @Styles.Render("~/bundles/styles/cvi")
  5. 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="nofollow noreferrer noopener" 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") %>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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"));

    ...
}

Method 3

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>

Method 4

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

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

Method 5

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/" />

Method 6

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.

Method 7

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x