Question

I have a custom theme for my rails app. This theme consists of 8 folder with complex structure (subfolders, lots of files). One of these folders is bootstrap which consist of css, js and img subfolder. Some other folders and subfolder also contain css, js and imgages.

How can I use assets pipeline to precompile these files and how to access them from code?

Answer 1

I recently purchased a large HTML5 theme and performed the work to get it into my rails project and using the asset pipeline. There was some bulk find/replace I had to do to get it happy with image URLs. Here is the overall approach I used:

1. Put all of the supplied “image” files and directories under
   /vendor/assets/images.
2. Put all of the supplied stylesheets under
   /vendor/assets/stylesheets
3. Put all of the supplied javascript under
   /vendor/assets/javascripts

With the above approach, all relative paths should be maintained as the theme vendor wanted them. For instance, my theme vendor had all images under an ‘img’ directory, so I simply copied that directory so it was /vendor/assets/images/img/…

Now, we need to get our application.css and application.js files to properly pull in the files it needs:

1. in /app/assets/javascripts/application.js add require lines to add all of the javascript that your theme vendor says you need
2. in /app/assets/stylesheets/application.css add require lines to add all of the stylesheets needed

Now the tricky part depends on whether or not your javascripts and stylesheets included other items. For any files that did, I recommend you rename them to .erb (add a .erb to the filename) which allows you to use the rails helpers such as asset_path and image_path:

.i24_arrow-180{ background-image: url(<%= asset_path 'img/icons/packs/fugue/24x24/arrow-180.png' %>); }

Or, in your javascript:

'<%= asset_path('js/mylibs/charts/jquery.flot.orderBars') %>':

Once you’ve fixed any image paths you should be ready to go with the new theme, and it will work with the Asset pipeline!

Warning: I spent hours debugging an asset compilation problem with a theme and it turned out it was because one of the images had a parenthesis in the filename and the sass compiler was gagging on that!