How to load vendor asset folder in Rails 4?

Question

I have a plugin with many types of files, and its own tree structure (html, css, js, documentation, images, etc)

Rather than going through the plugin folder, and splitting all the css and js files into the vendor/assets/js/ vendor/assets/css/ folders, I want to just keep the entire plugin folder as is. For example,

vendor/assets/multipurpose_bookshelf_slider/

How do I make sure the paths load properly, and reference them in my manifest files?

Currently, I have some files place as follows (not exhaustive)

/my_app/vendor/assets/multipurpose_bookshelf_slider/css/skin01.css
/my_app/vendor/assets/multipurpose_bookshelf_slider/js/jquery.easing.1.3.js
/my_app/vendor/assets/multipurpose_bookshelf_slider/
/my_app/vendor/assets/multipurpose_bookshelf_slider/

I'm referencing them in

application.js

//= require multipurpose_bookshelf_slider/js/jquery.easing.1.3.js
//= require multipurpose_bookshelf_slider/js/jquery.bookshelfslider.min.js

application.css.scss

@import "css/bookshelf_slider";
@import "css/skin01";

score 96 · Accepted Answer · edited Mar 16 '16 at 09:36

96

Any folder created directly under assets will be added to the load paths. Files in that folder can be referenced as usual like so:

If you have

vendor/assets/custom/js/file.js
vendor/assets/custom/css/file.css

then vendor/assets/custom/ will be added to the load paths.

Include your files in the following files by doing the following:

application.js

//= require js/file

application.css.scss

@import "css/file";

Once that's done, make sure to restart your local server, since it is upon starting your server that the load paths get recognized.

Note: to see a list of load paths, type in your terminal rails c, then type Rails.application.config.assets.paths.

edited Mar 16 '16 at 09:36

answered Sep 23 '14 at 01:02

ahnbizcad

10,491
9
59
85

3

why application.css.scss instead of just application.css? That deserves a little more explanation for beginners – emery Oct 20 '15 at 04:42
scss is a file type suffix. it is uses the sass/scss pre-processor. in rails, chaining suffixes makes it be parsed by the "language" corresponding last suffix, in that order. http://thesassway.com/ The question is how to load assets, regardless of what file it is. If there are other assets of other suffixes (e.g. jpg, etc), then they would be matched by regex or literal string values as well. It is good to clear up stuff for beginners. I do think it's immaterial to the question though. – ahnbizcad Oct 20 '15 at 16:10
1

oh i see what you mean. the scss file wasn't something referenced in the "master" css file, application.css. But rather, the application.css itself was changed. Fair point. I retract my claim of it being immaterial. The answer, conveniently, is exactly the same though =] CSS preprocess are super convenient, and SASS/SCSS is a pretty good one. others are LESS. Other one is Stylus, which I find has cleaner syntax than both of the others, but seems to have less of an ecosystem around it. – ahnbizcad Oct 20 '15 at 16:12
4

Also, you need to restart the server to load files under `vendor/assets` if you just created the `vendor/assets` directory. – abhishek77in Apr 03 '16 at 10:39
2

images under custom folder won't compile. You need to add something like `config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)` because everything under vendor/ and lib/ have to manually be added to the precompile list. If you need a separate file.js or file.css, you also need to add it to the precompile list. – konyak Nov 01 '16 at 21:22

score 3 · Answer 2 · answered Jun 15 '15 at 23:33

3

If the application you're running has the assets-pipeline activated, it should find your assets after expanding the path in your application.rb

config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider")

answered Jun 15 '15 at 23:33

D7na

106
9

2

As [ahnbizcad's answer](https://stackoverflow.com/a/25985318/641451) says, the path should be automatically added to the assets paths. If you're not seeing them, it may probably be that you have to **restart the app** after adding the new vendored folder - the search path only gets updated during startup. – mgarciaisaia Feb 01 '18 at 14:58

score 3 · Answer 3 · answered Jan 20 '17 at 13:18

I prefer D7na's answer but with a bit of improvement in my opinion.

As long as this is related to assets, I think it is better to be placed in the assets.rb file.

assets.rb:

Rails.application.config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider")

How to load vendor asset folder in Rails 4?

3 Answers3

Linked