Rails 4 Assets Managment for Stylesheets/Js/Images

Question

I am using an admin theme and it has 10-15 files of CSS/JS and lot more images.

I wanna include them and use them in a new template admin.html.erb

Which is the best way to include them keeping the folders intact.

Can i have another manifest file other than application.css called admin.css with the directives ?

This is how the theme imports the assets

Answer 1

Several things need to be fixed w/ this. Firstly, delete that giant blob of red and blue. Secondly, move your "fonts" directory out into your assets directory. Then, pop into your application.css and be sure that it looks something like this:

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* 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 .
*/

@font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome.eot');
    src: url('fontawesome.eot?#iefix') format('embedded-opentype'), url('fontawesome.svg#fontawesome') format('svg'), url('fontawesome.woff') format('woff'), url('fontawesome.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

What this will do is automatically load all of the stylesheets that are in your "stylesheets" directory into your application, and register your font so the css can use it. Thirdly, pop into your application.js file and make sure it looks something like this:

/*
This is a manifest file that'll be compiled into application.js, which will include all the files
listed below.

Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.

It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
compiled file.

Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
about supported directives.

= require jquery
= require jquery_ujs
= require turbolinks
= require_tree .
*/

That "require_tree" statement does precisely what that same statement did in the application.css; load everything into the application. Now you can call your JavaScripts in your views!

Hope this helps!