Question

I’m using Rails’ asset pipeline to concatenate all my CSS/JS (although I imagine the particular concatenation method I’m using might not make much of a difference).

The problem I’m having is that jQuery UI has all these @import directives, and so I’m getting a separate HTTP request for every single one of the CSS files jQuery UI wants to import, which is a lot of them. This is happening in both development and production. The rest of my concatenation is working perfectly; it’s just the jQuery UI stuff.

Here is my application.css, if it helps:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require vendor
 *= require scaffold
 *= require main
 *= require clients
 *= require appointments
 *= require marketing
 *= require services
 *= require reports
 *= require calendar
 *= require products
 *= require stylists
 *= require brochure
*/

And all my jQuery UI CSS is in vendor:

$ ll vendor/assets/stylesheets/jquery_ui/
total 216
drwxr-xr-x  18 jason  staff    612 Jun 21 11:48 .
drwxr-xr-x   5 jason  staff    170 Jun 21 11:42 ..
-rw-r--r--   1 jason  staff  35010 Mar 12 12:55 jquery-ui.css
-rw-r--r--   1 jason  staff   1064 Jun 21 11:48 jquery.ui.accordion.css
-rw-r--r--   1 jason  staff    290 Jun 21 11:48 jquery.ui.all.css
-rw-r--r--   1 jason  staff   1106 Mar 12 12:55 jquery.ui.autocomplete.css
-rw-r--r--   1 jason  staff    658 Jun 21 11:48 jquery.ui.base.css
-rw-r--r--   1 jason  staff   2470 Jun 21 11:48 jquery.ui.button.css
-rw-r--r--   1 jason  staff   1458 Mar 12 12:55 jquery.ui.core.css
-rw-r--r--   1 jason  staff   4045 Jun 21 11:43 jquery.ui.datepicker.css
-rw-r--r--   1 jason  staff   1357 Mar 12 12:55 jquery.ui.dialog.css
-rw-r--r--   1 jason  staff    356 Jun 21 11:48 jquery.ui.progressbar.css
-rw-r--r--   1 jason  staff   1170 Jun 21 11:48 jquery.ui.resizable.css
-rw-r--r--   1 jason  staff    322 Jun 21 11:48 jquery.ui.selectable.css
-rw-r--r--   1 jason  staff   1139 Jun 21 11:48 jquery.ui.slider.css
-rw-r--r--   1 jason  staff   1382 Mar 12 12:55 jquery.ui.tabs.css
-rw-r--r--   1 jason  staff  19141 Jun 20 22:38 jquery.ui.theme.css
drwxr-xr-x  18 jason  staff    612 Jun 21 11:48 minified

How can I get all my jQuery UI files to get concatenated like I would expect them to?

Answer 1

The default build of jQuery UI from http://jqueryui.com will have all the files concatenated. Make sure you get the file from the css folder instead of the development-bundle folder.