ASP.NET System.Web.Optimization: Bundling jQueryUI CSS

Question

I am trying to bundle jQueryUI in one request.

Global.asax:

var cssjQuery = new StyleBundle("~/Content/BundleCSS/jQuery");
cssjQuery.IncludeDirectory("~/Content/themes/base", "*.css");

Layout:

<link href="@Styles.Url("~/Content/BundleCSS/jQuery")" rel="stylesheet" type="text/css" />

Folder structure:

• CSS files: Content/themes/base/*.css
• Image files: Content/themes/base/images/*.png

The problem now is that the images can't be loaded, because there is no Folder "BundleCSS":

http://localhost:64648/Content/BundleCSS/images/ui-bg_flat_75_ffffff_40x100.png

How can I solve this issue?

Answer 1

Why don't you simple define your bundle on the theme directory path:

var cssjQuery = new StyleBundle("~/Content/themes/base/jquery-ui-bundle");
cssjQuery.IncludeDirectory("~/Content/themes/base", "*.css"); 

The relative image paths will still work (as the directory of CSS will remain the same).

Also please remember that the last part ( jquery-ui-bundle ) is being treated as the file name so it can be whatever you want (as long as it is not the same as one of the files).