Rails 3.1 and jquery-ui assets

问题

This was asked in another question, but none of the solutions appear to work for me in 3.1rc1.

I'm trying to use the new assets stuff in rails 3.1 - I have the files:

./vendor/assets/stylesheets/jquery-ui-1.8.13.custom.css
./vendor/assets/javascripts/jquery-ui-1.8.13.custom.min.js

I then added:

//= require jquery-ui to app/assets/javascripts/application.js
*= require jquery-ui to app/assets/stylesheets/application.css

The jquery-ui javascript file loads just fine, but the css file says:

Sprockets::FileNotFound (couldn't find file 'jquery-ui'
     (in /home/xanview2/xancar/app/assets/stylesheets/application.css):6):

Any ideas?

回答1:

Example of a working setup:

    $ cat app/assets/javascripts/application.js

    //= require jquery
    //= require jquery-ui


    $ cat app/assets/stylesheets/application.css

    /*
     *= require vendor
     *
     */


    $ cat vendor/assets/stylesheets/vendor.css

    /*
     *= require_tree ./jquery_ui 
     *
     */

    vendor/assets/ $ tree
     stylesheets
         vendor.css
             jquery_ui
                      jquery-ui-1.8.13.custom.css
                      ...
     images
        jquery_ui
            ui-bg_flat_0_aaaaaa_40x100.png
            ...

Finally run this command:

    vendor/assets/images $ ln -s jquery_ui/ images

Enjoy your jQuery UI

回答2:

This is a great article to read about Rails 3.1's asset pipeline and jQuery UI: JQuery-UI css and images, and Rails Asset Pipeline

回答3:

You might have more luck with the jquery-ui-rails gem (see announcement), which packages the jQuery UI JavaScripts, stylesheets and images as assets for you.

回答4:

This topic comes up a lot, and now that a significant amount of time has passed, things may be different.

In Rails 3.1.2, I found something that works without symbolic links. Follow the steps above, but put the images for the theme right next to the jquery-ui-xxx.css file in an images/ folder. This saved me quite a few headaches.

Yes, this would mean the images would reside in a stylesheets/ folder in vendor/assets, but it works and it is quick to do.

回答5:

Have you tried using the rails-asset-jqueryui gem? It vendors jquery-ui and the standard themes (currently v1.8.16) and makes them available via the asset pipeline. The following example calls for the Smoothness theme.

Gemfile:

....
gem 'rails-asset-jqueryui'
...

app/assets/javascripts/application.js:

...
//= require jqueryui
...

app/assets/stylesheets/application.css:

...
= require smoothness
...

回答6:

If you're using the jquery-ui-rails gem:

application.css

/*
 *= require jquery.ui.all
 */

application.js

//= require jquery.ui.all

回答7:

It seems to me that a lot of confusion can be avoided by keeping these library assets out of assets/javascripts and assets/stylesheets dirs, where sprockets et al have some opinions about what should happen.

Say you've downloaded a customized jquery-ui zipfile from the themeroller. Try this:

1. unpack the zip file into an subdir of an assets dir, something like

   vendor/assets/jquery-ui-1.8.23.custom
   

2. in application.rb add:

   config.assets.paths << Rails.root.join('vendor', 'assets', 'jquery-ui-1.8.23.custom').to_s
   

3. add manifest files in the usual places:

   vendor/assets/javascripts/jquery-ui.js:

   //= require_tree ../jquery-ui-1.8.23.custom
   

   vendor/assets/stylesheets/jquery-ui.css:

   *= require_tree ../jquery-ui.1.8.23.custom
   

4. in config/environments/production.rb, add (referring to manifest filenames):

   config.assets.precompile += %w(jquery-ui.js jquery-ui.css)
   

5. in views:

   <%= stylesheet_link_tag 'jquery-ui' %>
   <%= javascript_include_tag 'jquery-ui' %>
   

回答8:

if you use this:

https://github.com/carlhoerberg/sprockets-urlrewriter

i believe you can just dump the whole shebang in a directory and require the css file... it will smoothly rewrite the relative urls.

you just have to install the gem and add a config line to application.rb

来源：https://stackoverflow.com/questions/6133818/rails-3-1-and-jquery-ui-assets