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?

Fink

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).

Dhar

Phew... finally got it to work! Crazy that the default defined by the ASP.NET team doesn't work out of the box when the app is deployed to IIS. Thanks bro. – Landscapist

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). <- this saved a lot of brain cells – Phelia