404 Errors on Bundled Jquery CSS, VS2012 Publishing to Azure

404 errors on bundled jquery css, VS2012 publishing to Azure

The problem is the inclusion of "~/Content/themes/base/jquery.ui.all.css" in your first bundle. Move that file to the second bundle and it will work.

It works locally because locally, bundling doesn't occur (assuming you are in debug mode). The @import in that file works because it is looking in the correct directory ("/Content/themes/base/"), since the link is rendered as:

<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet"/>

When you deploy this, that file gets bundled into ~/Content/css. The style sheet is bundled and now is rendered as:

<link href="/Content/css?v=IqLBj6MTQkC-CU1" rel="stylesheet"/>

So now the two @import statements fail since the two files do not exist in that directory.

However, they do exist in "~/Content/themes/base/" which is why it will work in the 2nd bundle, when everything gets bundled in release mode.

More reading with info on how you can replicate this issue locally: Scripts.Render using outdated javascript file

Bundled CSS not loading when published to Azure

At the time of posting the question, I have been trying to publish to Azure 'n' number of times because of which Azure was somehow not displaying the CSS files. Tried after few hours and all worked like charm.

The main point to consider here is mentioned here. Hope it helps other folks.

MVC and Less bundles - not working in Release deployed to Azure

It turns out I had two issues. The normalize.css file was not included in the project, and therefore not being deployed to Azure. The Less file was returning 404 in the Azure environment, but once it was set to Build Action="Content" it started working. I am not sure why this second thing worked, so I have posted another question.

Why is my CSS bundling not working with a bin deployed MVC4 app?

The CSS and Script bundling should work regardless if .NET is running 4.0 or 4.5. I am running .NET 4.0 and it works fine for me. However in order to get the minification and bundling behavior to work your web.config must be set to not be running in debug mode.

<compilation debug="false" targetFramework="4.0">

Take this bundle for jQuery UI example in the _Layout.cshtml file.

@Styles.Render("~/Content/themes/base/css")

If I run with debug="true" I get the following HTML.

<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>

But if I run with debug="false". I'll get this instead.

<link href="/Content/themes/base/css?v=myqT7npwmF2ABsuSaHqt8SCvK8UFWpRv7T4M8r3kiK01" rel="stylesheet"/>

This is a feature so you can easily debug problems with your Script and CSS files. I'm using the MVC4 RTM.

If you think it might be an MVC dependency problem, I'd recommend going into Nuget and removing all of your MVC related packages, and then search for the Microsoft.AspNet.Mvc package and install it. I'm using the most recent version and it's coming up as v.4.0.20710.0. That should grab all the dependencies you need.

Also if you used to be using MVC3 and are now trying to use MVC4 you'll want to go into your web.config(s) and update their references to point to the 4.0 version of MVC. If you're not sure, you can always create a fresh MVC4 app and copy the web.config from there. Don't forget the web.config in your Views/Areas folders if you do.

UPDATE: I've found that what you need to have is the Nuget package Microsoft.AspNet.Web.Optimization installed in your project. It's included by default in an MVC4 RTM app regardless if you specify the target framework as 4.5 or 4.0. This is the namespace that the bundling classes are included in, and doesn't appear to be dependent on the framework. I've deployed to a server that does not have 4.5 installed and it still works as expected for me. Just make sure the DLL gets deployed with the rest of your app.

why css image will not show when EnableOptimizations = true?

Relative paths in external CSS resources are resolved as relative to the path of the CSS resource itself.

So if your not-bundled CSS lies in one path, and the bundled CSS gets downloaded from another path, then of course the relative path will not be correct any more. (Unless the bundling mechanism would take care of that, and correct such relative paths itself before it writes then into the bundled CSS.)

Easiest solution would be to always use paths that are relative to the domain root, so starting with a /. Of course that makes your project less flexible, should you f.e. one day move it to a sub-folder. If you want to avoid that as well, then look for a kind of solution that pre-parses your CSS, and allows you to use a variable/constant to define a base path in a central place.

---

Related Topics