CODEWITHSUNDEEP
asp.net
Justin
Justin

Reputation: 553

ASP.NET bundles looking for files in arbitrary locations

I was adding all my css/js to my layout manually, as in, right on the page. I decided I may as well use the bundles to simply things (apparently not).

The first bundle causing an issue:

            bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/font-awesome-4.4.0/css/font-awesome.css",
                  "~/Content/daterangepicker-bs3.css",
                  "~/Content/bootstrap-dropdown-checkbox.css",
                  "~/Content/kendo/2015.2.624/kendo.common.min.css",
                  "~/Content/kendo/2015.2.624/kendo.mobile.all.min.css",
                  "~/Content/kendo/2015.2.624/kendo.dataviz.min.css",
                  "~/Content/kendo/2015.2.624/kendo.default.min.css",
                  "~/Content/kendo/2015.2.624/kendo.dataviz.default.min.css",
                  "~/Content/site.css"));

Which causes nice errors like:

http://localhost:58703/Content/images/kendoui.ttf?v=1.1 Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:58703/fonts/fontawesome-webfont.woff2?v=4.4.0 Failed to load resource: the server responded with a status of 404 (Not Found)

I should note that the most ridiculous part about these errors is that if I click the URL's that it's saying it can't find the file in, the files are right there, exactly where it says it can't find them in.

The next bundle causing an issue:

            bundles.Add(new ScriptBundle("~/bundles/mapcrap").Include(
                "~/Scripts/daterangepicker.js",
                "~/Content/bootstrap-dropdown-checkbox.js",
                "~/Scripts/kendo/2015.2.624/jszip.min.js",
                "~/Scripts/kendo/2015.2.624/kendo.all.min.js",
                "~/Scripts/kendo/2015.2.624/kendo.aspnetmvc.min.js",
                "~/Scripts/kendo.modernizr.custom.js",
                "~/Content/jscolor.js",
                "~/Scripts/graphstuff.min.js"));

Which causes silly behaviour like:

http://localhost:58703/jscolor/arrow.gif  Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:58703/jscolor/hs.png  Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:58703/jscolor/cross.gif  Failed to load resource: the server responded with a status of 404 (Not Found)

I've tried some of the fixes I've found while searching, most of them were citing issues with version 1.1.1 I believe, however, that was several years ago. Unless M$ has yet to actually make this bundling stuff work.

Its beginning to appear as if it is fabricating random URLs as it goes along. It is now looking for 'kendoui.woff' in 

'\Content\images\kendoui.woff'

When the correct location is

\Content\kendo\2015.2.624\images\kendoui.woff

Upvotes: 2

Views: 3261

Answers (4)

Lamb Chop
Lamb Chop

Reputation: 225

I'm a bit late but was getting the same 404 error for font-awesome /fonts/fontawesome-webfont.woff2?v=4.4.0 and fixed it by adding these lines to web.config file under <system.webServer>:

<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>

Upvotes: 12

greyzet
greyzet

Reputation: 21

Look there for Telerik clarification: http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#css-bundling

The bundling has to be done in this way:

bundles.Add(new StyleBundle("~/Content/kendo/...VERSION.../css").Include(
"~/Content/kendo/...VERSION.../kendo.common.min.css",
"~/Content/kendo/...VERSION.../kendo.default.min.css"));

Upvotes: 2

Woland
Woland

Reputation: 2919

MS does have a class to handle the issue, to make it work simply use the following code:

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

Notice CssRewriteUrlTransform, it will change your relative links inside css to the correct ones before caching the bundle.

Upvotes: 3

Steven Berkovitz
Steven Berkovitz

Reputation: 781

The issue you are experiencing is not due to any problem with the bundle itself, rather the resources in the files you are bundling are referencing other files with a relative path. Because your bundle has a different path structure than the physical files, the relative paths don't properly reference the files.

To correct this, you can either manipulate the bundle path structure so that the relative paths are still correct, or you can change the relative paths (../images/whatever.gif) to absolute paths (/images/whatever.gif or http://www.someothersite.com/whatever.gif).

You might also have an issue with missing MIME types configured in IIS for the .woff file which would result in a 404 even if the file was present.

Upvotes: 1

Related Questions