CODEWITHSUNDEEP
ruby-on-railsjquery-pluginsasset-pipeline
Sarun Sermsuwan
Sarun Sermsuwan

Reputation: 3818

Ruby-on-rails: jQuery-ui and asset pipeline

I'm looking for a little clarity to my better understanding on Rails' asset pipeline. What I'd like to do is I want to use jQuery-ui components with rails having asset pipeline enabled.

Asset pipeline is quite something new to me. Basically, I know what asset pipeline does in general and how it looks through assets in the search tree. But from the picture below, I got no idea how and where to place stylesheets folder shipped with the jQuery-ui download to get it working in my project or to set it up rightly. So, the designated theme can apply to the UI I'm rendering with jQuery-ui as desired.

enter image description here

Is the application.css file the very place I should put in a reference to that theme?

My best guess is it might be working if I add the theme folder at the second line in application.css below:

 *= require_self
 *= require_tree ., ./ui-lightness

but what I got was Error compiling CSS asset

ArgumentError: wrong mumber of arguments (2 for 1)

Please shed some light on me how to get this working as I wanted.

Upvotes: 0

Views: 238

Answers (2)

benchwarmer
benchwarmer

Reputation: 2774

You need to change *= require_tree ., ./ui-lightness to

*= require_tree .
*= require ui-lightness/name_of_css_file

Also you need to copy the images included in the downloaded bundle to app/assets/images/ui-lightness directory. (Needless to say that create new folder)

Open the css files from downloaded images, find and replace url: ("../images/image_name.jpg to url: ("image_name.jpg")

This will set the appropriate image paths. Its advisable to put 3rd party library into vendor/assets dir. But no harm in putting it into regular assets dir until you can identify which css/js files belong to 3rd party

Upvotes: 1

alestanis
alestanis

Reputation: 21863

You can't put several things inside a require_tree line. Just split this line

*= require_tree ., ./ui-lightness

into two lines:

*= require_tree .
*= require_tree ./ui-lightness

Upvotes: 0

Related Questions