Include vendor java scripts and style sheets in Rails 3.1
In rails 3.1 any external javascript/stylesheet plugins (like tablesorter.js etc) that you use in your project are placed in vendor/assets directory. To include it in your rails application, add a vendor.js and vendor.css.scss file as shown below in your assets/javascripts and assets/stylesheets directory.
vendor.js:
// This is a manifest file that'll be compiled into including all the files listed below. // Add new JavaScript/Coffee code in separate files in this directory and they'll automatically // be included in the compiled file accessible from http://example.com/assets/application.js // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // the compiled file. // //= require_tree .
vendor.css.scss:
/* * This is a manifest file that'll automatically include all the stylesheets available in this directory * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at * the top of the compiled file, but it's generally better to create a new file per style scope. *= require_self *= require_tree . */
Now update your application.js and application.css.scss files to include vendor.js and vendor.css.scss respectively.
application.js:
// This is a manifest file that'll be compiled into including all the files listed below. // Add new JavaScript/Coffee code in separate files in this directory and they'll automatically // be included in the compiled file accessible from http://example.com/assets/application.js // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // the compiled file. // //= require jquery //= require jquery_ujs //= require jquery-ui //= require vendor //= require_tree .
application.css.scss:
/* * This is a manifest file that'll automatically include all the stylesheets available in this directory * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at * the top of the compiled file, but it's generally better to create a new file per style scope. *= require_self *= require lib *= require vendor *= require_tree . */
Now you can add files to your vendor assets directory and it will be picked up your rails app. Being a beginner in rails, I found this way very effective as I don’t have to update my application.js file once set. I would be interested to know if there is a better way of handling this.
Thanks, this was driving me mad! If there’s a better way, my Google-foo has not found it.
Side note: The vendor.css.scss MUST be scss! I tried just css first (application.css so why do I need scss on vendor?) but it _does not_ work.
Thanks again.
Elliott
December 4, 2011 at 11:17 am