Rails 3 assets & CSS relative URLS

Question

I have several CSS files which make referece to images using relative paths like url( "../img/my_image.jpg" ).

Everything works in development but in production environment, as all the CSS files are packed in one file and the structure is lost, also the relatives paths are lost, and the images are not found.

Details of my structure

I have an assets structure like this:

/app
  /assets
    /plugins
      /my_plugin
        /img
          my_image.jpg
        /css
          my_css.css

(/my_plugin can be any plugin that is a groups of css, js and images files like Twitter Bootstrap any any other)

Into the /app/assets/plugins/my_plugin/my_css.css I have something like:

background-image: url("../img/my_image.jpg");

In the /app/assets/stylesheets/application.css:

*= require css/my_css.css

And finally in the head of my html file:

<%= stylesheet_link_tag "application" %>

What should I do to fix the issue?

Update

Mini application to reproduce the issue, in the README there are instruction to install and reproduce the issue.

Answer 1

I don't see a problem with concatenating CSS files. And you don't have to include your deeply nested CSS files manually: by default, application.css already does this in the line *= require_tree .

And images will repeat your app/assets/images structure. To deal with them correctly both in development and production environments you have the respective Guide. Check its section 2.2 Coding Links to Assets. There's explanation about coding paths to your image files:

CSS via ERb:

 url(<%= asset_path 'image.png' %>)

CSS via Sass:

 image-url("rails.png")

All these weird hex characters at the end of your precompiled images will be respected automatically.

UPD

I see you don't need the assets pipeline feature for your plugins at all. Your styles/scripts are already minified. You can move your plugins folder into your public folder (to become <APP_ROOT>/public/plugins/).

Then delete the following line from your application.css:

*= require bootstrap/css/bootstrap

Instead add the following lines to your template application.html.erb:

  <%= stylesheet_link_tag    "/plugins/bootstrap/css/bootstrap.min.css", :media => "all" %>
  <%= javascript_include_tag "/plugins/bootstrap/js/bootstrap.min.js" %>

Now you have to be able to switch between your themes easily by replacing your public/plugins/bootstrap's content.

UPD 2

Probably you have to explicitly tell Rails to precompile your plugin assets:

# /config/environments/production.rb
config.assets.precompile += %w( bootstrap/css/bootstrap.css )