Understanding Asset Pipeline

Rails
1

ok, so I’m doing an upgrade on a rails 2.3.2 app to 3.1, and I’ve
noticed a lot of roadblocks with the asset pipeline. Luckily I’ve
figured them all out, but I’m wondering how everyone else is solving
these issues.

Let’s take a newly generated rails 3.1 app. I have a grid of squares
I want to click on, and have a modal window popup. I can //= require
jquery-ui in my app/assets/javascripts/application.js and that will add
in my model() method, but I can’t require the jquery-ui in my
application.css. It looks like no themes are included. (unless I’m
missing something).

I download a theme I would like to use, and in the stylesheets folder,
there’s a jquery-ui.css and an images folder. I added these into the
vendor/assets/stylesheets folder, and in my
app/assets/stylesheets/application.css.scss file I require jquery-ui,
and Sprockets can’t find it. I moved this file and it’s images folder to
the app/assets/stylesheets folder. Sprockets can now find the
stylesheet, but won’t load any of the images. The default
background-image: url() in this file is looking for
images/whatever.png). moving those images to the app/assets/images
folder doesn’t work either. I had to tack on .scss to the file, and then
global find an replace the background url stuff with
image-url(whatever.png), and now it all works.

IMO, 3rd party things should not be edited, or altered. Although, I’ve
been known to edit 3rd party stuff to make it fit, I just feel it’s bad
practice.

So, now I would like to know in situations like this, how are other
Rails developers handling this? Is there something I’m missing that
would have made this easier? Maybe a config option or something…

2

Here’s what I do (on Rails 3.1.1 and later):

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

in application.js, add line
//= require jquery-ui

That gets the jquery-ui stuff working. Then, for my custom theme, I do
the following:

/app/assets/stylesheets/jquery-ui-1.8.13.custom.css (this is my custom
theme css)

That gets picked up by the *= require_tree . in my application.css.

/app/assets/images/images - put custom theme images here (note it’s
images/images)

And that’s it. This won’t work on 3.1 or earlier, as the images are
referenced in the theme css without digests; 3.1.1 and later by default
will copy nondigest versions of these assets, which makes it all work.

Greg

3

hmm. Ok, in my app that I’m upgrading, I can’t do require_tree . because
of the 150 different stylesheets used currently. I should just be able
to *= require jquery-ui1.8.13.custom, right? Now what about the whole
thing of 3rd party stuff going into vendor/assets ?

How do you deal with 3rd party css that look for …/images/whatever.png
in background-image? Those are all failing as well.

Thanks for the suggestion on throwing the images folder into the other
images folder. I’ll try that. Not too harsh of a compromise :slight_smile:

**** EDIT ****
ok, I just tried this, and none of the background css is showing up.
Like,
.ui-widget-content { border: 1px solid #eeeeee; background: #ffffff
url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color:
#333333; }

Inspecting this element only shows border, and color being applied. When
I add that style through the inspector, it shows
ActionController::RoutingError (No route matches [GET]
“/images/ui-bg_flat_75_ffffff_40x100.png”):

And this is with the setup being
app/assets/stylesheets/jquery-ui-1.8.16.custom.css
app/assets/images/images/ui-bg_flat_75_ffffff_40x100.png

Any idea why this would be? Using gem ‘rails’, ‘3.1.2’

~Jeremy

4

On Nov 21, 2011, at 11:51 AM, Jeremy W. wrote:

hmm. Ok, in my app that I’m upgrading, I can’t do require_tree . because
of the 150 different stylesheets used currently. I should just be able
to *= require jquery-ui1.8.13.custom, right?

Yep, that should work fine.

Now what about the whole
thing of 3rd party stuff going into vendor/assets ?

My thought on this was, jquery-ui itself is a 3rd-party vendor asset.
However, custom themes that I generate are more questionable; I chose to
put those under my app directory instead of vendor. However, you should
be able to make it work either way.

How do you deal with 3rd party css that look for …/images/whatever.png
in background-image? Those are all failing as well.

Remember that when your assets are compiled, the javascripts, images,
and stylesheets folders in your app all get dumped into a single
/public/assets folder. If you have a subfolder in one of those, like
images/images, then the subfolder will get added to your assets folder.

Armed with that knowledge, I’ve found you can usually figure out how to
arrange your assets in order to get those images picked up ok.

Thanks for the suggestion on throwing the images folder into the other
images folder. I’ll try that. Not too harsh of a compromise :slight_smile:

I only have it that way because the theme css is coding paths to images
as “images/…”, so if I want to avoid modifying code they need to go in
a subfolder like that.

As another approach, if you’re using say fancybox, there is a gem at
GitHub - chrismytton/fancybox-rails: Use FancyBox with the Rails asset pipeline that you could use; this
gem makes some changes in the fancybox script in order to play nice with
the asset pipeline, but it’s not something that’s likely to change often
and thus I use it to keep my app’s asset directories a little cleaner.

Greg