.NET MVC style bundle gotchas

I encountered a couple of .NET MVC bundle problems when trying to load css resources for the jHtmlArea jQuery HTML Editor.

Problem #1:  403 – Forbidden: Access is denied.

This was my first attempt to bundle the jHtmlArea style resources.  The 403 Forbidden occurred because my bundle name matched the actual folder name, so IIS was attempting to handle the request as explained in this StackOverflow post.

1 bundles.Add(new StyleBundle("~/Content/jHtmlArea").Include(
2     "~/Content/jHtmlArea/jHtmlArea.css",
3     "~/Content/jHtmlArea/jHtmlArea.Editor.css",
4     "~/Content/jHtmlArea/jHtmlArea.ColorPickerMenu.css"));

Problem #2:  Resources not found.

This was my second attempt to bundle the jHtmlArea style resources.  This time, my resources such as jHtmlArea.png (located in \Content\jHtmlArea) could not be found because the bundle attempted to load those resources from \Content.

1 bundles.Add(new StyleBundle("~/Content/jHtmlAreacss").Include(
2     "~/Content/jHtmlArea/jHtmlArea.css",
3     "~/Content/jHtmlArea/jHtmlArea.Editor.css",
4     "~/Content/jHtmlArea/jHtmlArea.ColorPickerMenu.css"));

Solution

This version solves both problems.  Apparently the root path for the bundle must match the actual root path of the resources.

1 bundles.Add(new StyleBundle("~/Content/jHtmlArea/jHtmlAreacss").Include(
2     "~/Content/jHtmlArea/jHtmlArea.css",
3     "~/Content/jHtmlArea/jHtmlArea.Editor.css",
4     "~/Content/jHtmlArea/jHtmlArea.ColorPickerMenu.css"));