Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 417
Rookian Avatar asked Oct 01 '12 08:10

Rookian


People also ask

What is bundling CSS?

A CSS bundle is simply a collection of style sheets. Here's the code you need to group the two aforementioned CSS files in a single download: XML Copy.

What is difference between bundling and minification?

Bundling and minification are two techniques you can use in ASP.NET to improve page load performance for your web application. Bundling combines multiple files into a single file. Minification performs a variety of different code optimizations to scripts and CSS, which results in smaller payloads.

What is bundling in asp net?

To improve the performance of the application, ASP.NET MVC provides inbuilt feature to bundle multiple files into a single, file which in turn improves the page load performance because of fewer HTTP requests.

What is bundle optimization?

Optimization dll. Bundling. The bundle is a logical group of physical files, which loads in a single HTTP request. We have separate CSS files, which can be loaded in a single request with the help of bundling. The bundling also can create for JavaScript files separately.


1 Answers

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

like image 52
tpeczek Avatar answered Sep 28 '22 03:09

tpeczek