Skip to content

Asset pipeline — bundling plugin assets #1656

Closed
nashbridges opened this Issue Jun 11, 2011 · 14 comments

10 participants

@nashbridges

I'm using rails from master and sprockets-2.0.0.beta.10.
I've tried to use jQueryUI theme in a project but have no luck. What I've done:

— placed all assets in the /vendor/assets/stylesheets folder, so it looks like:

/stylesheets
--/ui-darkness
----/images
----jquery-ui-1.8.13.custom.css

— created index.css with the following content:

/*
*= require ./jquery-ui-1.8.13.custom
*= provide ./images
*/

and put it in the /ui-darkness folder.

— required in the application.css:

*= require_self
*= require ui-darkness
*= require_tree .

For now I've got index.css and jquery-ui-1.8.13.custom.css compiled into the application.css but other assets remained unreachable:

Started GET "/assets/images/ui-bg_glass_20_555555_1x400.png" for 127.0.0.1 at 2011-06-11 19:16:54 +0300  
Served asset /images/ui-bg_glass_20_555555_1x400.png - 404 Not Found  (4ms)  (pid 5822)
@neerajdotname
Ruby on Rails member

Did you include jquery-ui JavaScript file? It seems you did but you did not mention that in the ticket.

@nashbridges

Sure. I have

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

in the application.js.
Since DOM tree was changed by jQuery UI (that's why I've got requests for image assets) I didn't think I have to mention that.

@nashbridges nashbridges reopened this Jun 12, 2011
@nashbridges

Sorry, those buttons is quite near to each other!

@geoffgarside

You might need to tweak the jquery-ui CSS you're using. When I ported a template I was using to use the asset pipeline I extracted all of the CSS background-image rules from the main CSS and pushed them into a separate images.css.scss.erb file which had things like

#something {
  background-image: url(<%= asset_path('something.png') %>);
}

which was then included into the application.css file either explicitly or by require_tree.

@nashbridges

jquery-ui-1.8.13.custom.css has 18 (!) matches of "url". Too much tweaking as for me. Imagine you will have to fix every css in every jQuery plugin you want to use in a project. This is totally wrong. And this is http://getsprockets.org/installation_and_usage#bundling_assets_with_the_provide_directive was made for, but I can't understand why it's not working as expected.

@nashbridges

After digging some code I found that provide directive is deprecated in Sprockets 2.x.
So I tried another approach:

— index.css has been modified as

/*
  *= require_tree .
*/

since it's unnecessary to refer each file manually.

— added to the application.rb

config.assets.paths << File.join(Rails.root, 'vendor/assets/stylesheets/ui-darkness')

This works at least in the development mode. After all I hope that in the future releases only one line ("=require ui-darkness" in the application.css) will have to do all work.

@spastorino
Ruby on Rails member

Is this still an issue?, have you tried 3-1-stable branch + sprockets from master?

@nashbridges

This is still an issue in terms of ambiguity: what's the right approach to include javascripts plugins into a Rails 3.1 project in case such ones supplied with stylesheets and images (especially if there's relative paths to the images in the stylesheet)?

@turadg
turadg commented Jul 14, 2011

@nashbridges, agreed. this is unclear.

@josh josh was assigned Jul 21, 2011
@tenderlove
Ruby on Rails member

@josh can you please comment on this?

@josh
Ruby on Rails member
josh commented Jul 21, 2011

Don't use provide, it doesn't do anything.

I'd suggest mirroring the app/assets/{javascripts,stylesheets,images} structure. You can then reference any images inside app/images. GET /assets/foo.png will look for app/assets/images/foo.png.

@josh josh closed this Jul 21, 2011
@plindelauf

This is still an issue. The mirroring doesn't work (or I don't understand the comment), because the stylesheets reference images in a subdirectory of the stylesheet's directory, e.g. background-image: url(images/ui-icons_72a7cf_256x240.png). The asset pipeline will try to resolve /assets/images/ui-icons_72a7cf_256x240.png and not assets/ui-icons_72a7cf_256x240.png as @josh suggests.

The question remains: what is the preferred solution in cases like these when the vendor's stylesheet does not contain asset pipeline directives for pointing to images?

@TylerRick

I agree, this is still an issue for those of us who have jQuery UI themes generated by their Theme Roller tool and want it to "just work" in Rails 3.1.

I started putting the theme assets under vendor/assets/jquery-ui-lightness, thinking that was the "correct" way to do things in Rails 3.1 and use the asset pipeline. But it seems like more trouble than it's worth in this case!

Not only do you have to replace references to url() in the css file with calls to asset_path (and change the file extension to .css.erb), you'd also have to move all the images out to a different directory (or add the images to the assets path with config.assets.paths << "#{Rails.root}/vendor/assets/jquery-ui-lightness/images") so that it can find those images and serve them!

Instead, I just moved the theme files back to public/jquery-ui-1.8.14.custom/css/ui-lightness and referenced them in my layout:

  = stylesheet_link_tag 'application', '/jquery-ui-1.8.14.custom/css/ui-lightness/jquery-ui-1.8.14.custom.css'
  = javascript_include_tag 'application'

This is the only css file I had to exclude from the asset pipeline. Which is too bad I had to make an exception for it, but at least when you leave it under public/ it just works!!

Hopefully down the road someone will write a jquery-ui gem that has the css and images under vendor/stylesheets and vendor/images, so you can just add jquery-ui to your Gemfile and it will work without any extra trouble. Hmm, I guess that wouldn't work, because jQuery UI users want to be able to choose from a list of available themes or create a custom theme. It could work for their standard provided themes (the jquery-ui gem could simply have separate manifest files like jquery-ui-lightness that you could include in your app's manifest file) but wouldn't work for custom Theme Roller themes.

Might also be relevant:
http://stackoverflow.com/questions/7546202/trouble-with-the-asset-pipeline-on-deploying-production-mode

@jrochkind

Here are a couple approaches I figured out to this issue:

http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/

Basically, you can either add to the config.assets.paths somewhat as @nashbridges suggests, except you need to do it in a special initializer to make sure you get it in there before the Rails default paths; OR you can place the jquery-ui CSS and ./images dir both at the root of an existing rails asset path, so they'll have the right relative path relation to each other.

Both approaches work both in default dev and default production configuration, as well as every other asset config combo I could think of (like dev with debug=false).

The config.asset.paths approach is in config/application.rb, eg:

initializer :jquery_ui_images_asset_base, :group => :all,  :after => :append_assets_path do
    config.assets.paths.unshift Rails.root.join("app", "assets", "stylesheets", "jquery-ui", "cupertino").to_s
end

It would be nice if there were a less hacky way to accomplish this, maybe even an sprockets directive that could somehow say to treat a a certain subdir in existing asset environment path like stylesheets/jquery-ui/themename as being at a 'base path' for compilation of assets under that subdir; but then, I think you need it in config.assets.paths for routing under certain conditions too (dev mode but debug=false maybe?), so maybe that's a non-starter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.