Rails 4 + bootstrap set up assets

Question

I am trying to setup bootstrap on Rails4 using bootstrap-sass and I am getting this famous error:

Sprockets::FileNotFound - couldn         


        

Answer 1

The fix for me was two parts ... my correct list first ... but the list alone wasn't the fix!

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'

Then I had a gemfile.Lock issue ... if anyone else can't get the files to load & doesn't want to use the CDN...check your gemfile.Lock & see what versions are compiled off the gemfile (one is input for us as dev's & the other is what is actually ran by the framework - it will cause issues if you try to modify gemfile.lock).

To resolve the gemfile lock...close the gemfile & gemfile.Lock

1. I had to first delete the items in question from the "gemfile".
2. I did a "gem install <name of gemfile>" I wanted for each of them.

Then open the gemfile & gemfile.Lock to check results. Note, you still have to do all the configuration bootstrap etc requires for each of these. It doesn't hurt to run a rails assets:precompile either.

Note: The rails assets:precompile is a rails 5 command.

Answer 2

On one of my projects (Rails 4.1) I had to include the bootstrap directly (not sass). Maybe it will give a hint on making the saas version work. So below are steps to include the bootstrap directly:

1. Download and and extract the bootstrap to Rails.root/vendor/assets/bootstrap

2. Create file Rails.root/vendor/assets/javascripts/bootstrap.js file with contents like this:

   //= require ../bootstrap/js/bootstrap.js

3. Now the most important part to make icons work. The font file urls have to be overridden for the Glyphicons Halflings font. Also asset_path helper has to be used. So create file Rails.root/vendor/assets/stylesheets/bootstrap.css.erb file with contents like this.

/*
=require ../bootstrap/css/bootstrap.css
*/

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url("<%= asset_path 'glyphicons-halflings-regular.eot' %>");
    src: url("<%= asset_path 'glyphicons-halflings-regular.eot?#iefix' %>") format('embedded-opentype'), url("<%= asset_path 'glyphicons-halflings-regular.woff2' %>") format('woff2'), url("<%= asset_url 'glyphicons-halflings-regular.woff' %>") format('woff'), url("<%= asset_path 'glyphicons-halflings-regular.ttf' %>") format('truetype'), url("<%= asset_path 'glyphicons-halflings-regular.svg#glyphicons_halflingsregular' %>") format('svg');
}

4. Now require bootstrap in the application.js and application.css

application.js

//= require bootstrap

application.css

 *= require bootstrap

5. And finally let assets pipeline be aware of the fonts path and additional extensions to precompile. In the application.rb add:

config.assets.paths << Rails.root.join("vendor", "assets", "bootstrap", "fonts")
config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.woff2 )

After that RAILS_ENV=production rake assets:precompile should show that is has recognized font files and copied them to the public assets folder.

Then to test if it works in production enable serving static assets (in production.rb: config.serve_static_assets = true) and RAILS_ENV=production rails s

Answer 3

I ended up using bootstrap from a hosted CDN

      %link{href: "//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css", rel: "stylesheet"}/
      %link{href: "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" , rel: "stylesheet"}/
      %link{href: "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css", rel: "stylesheet"}/

Answer 4

Installing the Bootstrap Gem

1.) Add the Bootstrap Gem:

gem 'bootstrap-sass'

2.) Understand The Application.css File app/assets/stylesheets/application.css

Application.css takes all the other files in your /stylesheets directory and combines them for when you run your app.

3.) Create a New SCSS File (app/assets/stylesheets/bootstrap_and_customization.css.scss)

@import 'bootstrap';

4.) Require Bootstrap's JavaScript

...
//= require jquery
//= require jquery_ujs
//= require bootstrap <--
//= require turbolinks
//= require_tree .

5.) Rails Assets

group :production do
  gem 'rails_12factor'
end

6.) Bundle Install & Restart Server

Thats should be it !

Answer 5

I had exactly the same error. The solution was to change in:

config/environments/production.rb

The line

config.serve_static_assets = false

to

config.serve_static_assets = true

I'm not exactly aware of what this line does, but my workteam had the same problem on a project, and they changed this line, and it worked.

Answer 6

Try this:

Open config/application.rb, add the following line:

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

In your config.ru file, add

 require 'bootstrap-sass'

Rename your application.css.scss to something else e.g. custom_bootstrap.css.scss. I have no idea why it makes a difference but it did in my case.

Also, from what I understand, by default bootstrap-sass does not require you to add

  //require bootstrap

to your application.js. Apparently it breaks some kind of functionality.