What path for Heroku Rails 4 Assets pipeline in css files

Question

I running a Rails 4 App on Heroku with custom Jquery-ui css and image assets. I used rail's asset:precomile and the css/js files work fine on Heroku. The problem I have are the background-image url in the css files of the custom jquery-ui.

I know they are located in assets/jquery-ui/(orginial-filename)-(rails digest #).(png jpg...), and it would work if I manually set each file to their exact path on Heroku, but there must be an easier way. As of right now all my css image file path are prefixed with /assets/(imagefilename).

---

Update: Actually it's not a conflict between the jquery-ui-rails gem and my custom jquery-ui css. The problem has something to do with how Sprocket compiles the scss or sass.

 .ui-icon
   width: 16px
   height: 16px
   background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')

 .ui-widget-content .ui-icon
   background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')

 .ui-widget-header .ui-icon, .ui-state-default .ui-icon
   background-image: image-url('jquery-ui/ui-icons_b83400_256x240.png')

 .ui-state-hover .ui-icon, .ui-state-focus .ui-icon
   background-image: image-url('jquery-ui/ui-icons_ffffff_256x240.png')

 .ui-state-active .ui-icon
   background-image: image-url('jquery-ui/ui-icons_8c291d_256x240.png')

 .ui-state-highlight .ui-icon
   background-image: image-url('jquery-ui/ui-icons_3572ac_256x240.png')

 .ui-state-error .ui-icon, .ui-state-error-text .ui-icon
   background-image: image-url('jquery-ui/ui-icons_fbdb93_256x240.png')

What's happening to me is this... everything gets compile into application.css/gz. However .ui-icon width: 16px height: 16px background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')

 .ui-widget-content .ui-icon
   background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')

image-url gets compile into url(/assets/....) works fine. But everything below

 .ui-widget-header .ui-icon, .ui-state-default .ui-icon
   background-image: image-url('jquery-ui/ui-icons_b83400_256x240.png')

all image-url gets convert to url(/images/orginial_filename).... which doesn't work.

---

Haha... never mind I figured out why this is happening. That's because the precompiler is not loading the vendor/assets/images folder. Just had to include it in the array. I guess the precompiler sets image-url to url(images/default_filename) if it doesn't find the compile image asset.

Answer 1

When using Gems that hook into the asset pipeline, you basically have 3 options.

From easiest to hardest .

Options 1: Install the gem and use it without customization.

• gem 'jquery/ui-rails' in Gemfile
• $ bundle install
• rake assets:precompile
• Enjoy.

Option 2: Install the library manually and don't install the gem.

• Download jquery-ui from their site.
• Copy it to /app/assets/jquery-ui
• rake assets:precompile
• Enjoy.

Option 3: Install the gem then override the default with custom assets.

WARNING: Javascript/Stylesheet require nightmare.

• `gem 'jquery-ui-rails`` in Gemfile
• bundle install
• Customize the library by adding asset files in app/assets/stylesheets and app/assets/javascripts
• Add the appropriate require s in /app/assets/stylesheets/application.css that include the stock jquery-ui files first then require your custom files to override the defaults.
• Repeat previous step for javascripts.
• Enjoy.

Notes: You can do Option 2 and edit the stock jquery-ui to suit your needs but a lot of people consider this impure. There are advantages to keeping the clean jquery-ui files separate from your customizations I guess.

This applies to all the asset gems like Bootstrap, etc...

---

And don't forget...

In your CSS files (assuming they are SASS , aka application.css.scss ), you can use

image-url('jquery-ui/whatever.jpg');

and that will be translated to

url('/assets/jquery-ui/whatever-<hash>.jpg');

in your compiled CSS document. You can use that with background-image , etc...

Answer 2

Haha... never mind I figured out why this is happening. That's because the precompiler is not loading the vendor/assets/images folder. Just had to include it in the array. I guess the precompiler sets image-url to url(images/default_filename) if it doesn't find the compile image asset.