Recently I bought a website template from WrapBootstrap and I wanna itegrate this into a Spree website I’m working on. According to the documents of Asset Pipeline and the RailsCasts. I put the stylesheets and javascripts of this template into the folder #{Rails.root}/vendor/assets/tshop. So for example, I can access a stylesheet at #{Rails.root}/vendor/assets/tshop/stylesheets/style.css from the url http://localhost:3000/assets/stylesheets/style.css

My folder structure is like following figure,

According to the Rails documents, I should create a file index.js and index.css under #{Rails.root}/vendor/assets/tshop, but that doesn’t work for me. Actually I named the files as tshop.js and tshop.css.scss, as the figure above. So in the application.css and application.js I chould load the tshop library by calling,

1
2
3
4
5
6

/*
 ...
 *= require tshop
 ...
 */

and

1

 //= require tshop

And in the tshop.css.scss, I could load the file #{Rails.root}/vendor/assets/tshop/stylesheets/style.css by using following code,

1
2
3
4
5
6

/*
 ...
 *= require stylesheets/style
 ...
 */

And in tshop.js, the file #{Rails.root}/vendor/assets/tshop/javascripts/script.js could be loaded by following code,

1

 //= require javascripts/script

In the templates, I need to change the background image url, for example, in style.css,

1
2
3
4

.parallax-image-2 {
  background: url("/assets/stylesheets/parallax/people-collage.jpg") fixed;
  background-attachment: fixed;/* IE FIX */
}

This image file will be in #{Rails.root}/vendor/assets/tshop/stylesheets/parallax/people-collage.jpg.

Here are the organization I used for my Rails 4 application. The point is to use library.css and library.js to name the index files instead of index.css and index.js.