Importing css and js into Rails 4.2.4 app using @import or require

3
votes

I need to import some files into application.css or application.js files. For example, for css I use @import statements. I have some stylesheets in a vendor/assets/stylesheets directory:

vendor/assets/stylesheets/font-awesome.min.css
vendor/assets/stylesheets/bootstrap.min.css
etc

So I use:

@import 'font-awesome';
@import 'simple-line-icons';
@import 'bootstrap';

Here I was able to load the font-awesome file, but not bootstrap or simple-line-icons. I got this error:

File to import not found or unreadable: file_name.css

Quite strange. Is the general idea of importing files from vendor directory correct? Or should I put those files in some other directory?

P.S: I know you might ask why I am importing bootstrap manually and not using a gem; the answer is that I bought some templates and I want to include all files from the templates to be consistent.

2
ruby-on-railsruby-on-rails-4asset-pipeline
Your idea of importing files from vendor/assets/stylesheets is perfectly correct. Have you tried to use @import 'bootstrap.min'? - Alexander Komarov
@AlexanderKomarov, thanks, it helped. Generally the problem was that font-awesome was loaded via gem dependency. - yerassyl
That makes sense, I was wondering why you could import font-awesome and not bootstrap. AFAIK I should convert my comment into an actual answer. Will do. - Alexander Komarov

2 Answers

4
votes

Your idea of importing files from vendor/assets/stylesheets is absolutely correct. Files imported from somewhere else (not written by yourself) should go there.

However, you should do @import bootstrap.min, not @import bootstrap.

Also, it's probably better to put *= require bootstrap.min into your application.css as @Rendrum pointed out.

2
votes

Assets owned by outside entities should be placed in the vendor/assets directory, so it could be managed by rails successfully.

In order to include them in your app you can load them automatically by using these expressions in your application.css

*= require font-awesome
*= require simple-line-icons
*= require bootstrap

I suggest you to read this in order to understand how rails works: http://guides.rubyonrails.org/asset_pipeline.html

Thanks Alexander Komarov for the corrections :)