Rails 4 + bootstrap set up assets

问题

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

Sprockets::FileNotFound - couldn't find file 'bootstrap'
  (in app/assets/javascripts/application.js:16):

I have tried following:

twitter/bootstrap in application.js
gem 'bootstrap-sass', '~> 3.1.0' is outside group assets
Also tried bunch of other things on internet

I have spend lot of time taking different suggestions from other posts. How do I systematically debug this , how to setup bootstrap-sass ?

p.s: Also been trying to get twitter-bootstrap-rails working with no luck.

Here are some files

application.js

//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap
//= require_tree .
//= require bootstrap-slider

application.css.scss

 *= require jquery.ui.core
 *= require jquery.ui.theme
 *= require_self
 *= require bootstrap-slider
 *= require_tree .
 *= stub active_admin
*/

@import "bootstrap";

Gemfile

source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.0'
gem 'sass-rails'
gem 'coffee-rails', git: 'git://github.com/rails/coffee-rails.git'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-ui-rails'
gem 'font-awesome-sass'
gem 'less-rails'
gem 'therubyracer', :platform=>:ruby
#gem 'twitter-bootstrap-rails'
gem 'jquery-rails'
#gem 'jquery_mobile_rails'
gem 'js-routes'
gem 'cancan'
gem 'devise'
gem 'figaro'
gem 'haml-rails'
gem 'pg'
gem 'rolify'
gem 'sendgrid'
gem 'simple_form'
gem 'thin'
gem 'rake'

#To use db for storing cookies instead cookie-store
gem 'activerecord-session_store', github: 'rails/activerecord-session_store'

group :development do
  gem 'better_errors'
  #gem 'binding_of_caller', :platforms=>[:mri_19, :rbx]
  #Commenting out platforms part, because may be that's stopping this to be used on the dev machine'
  gem 'binding_of_caller'
  gem 'guard-bundler'
  gem 'guard-rails'
  gem 'guard-rspec'
  gem 'html2haml'
  gem 'quiet_assets'
  gem 'rb-fchange', :require=>false
  gem 'rb-fsevent', :require=>false
  gem 'rb-inotify', :require=>false

  # Required with Rails panel chrome extension. This Gem should come after better_errors gem
  gem 'meta_request'
end
group :development, :test do
  gem 'factory_girl_rails'
  gem 'rspec-rails'
  gem 'pry-byebug'
  gem 'pry-stack_explorer'
  gem 'pry-rails'
  gem 'pry-debugger'
end

group :test do
  gem 'capybara'
  gem 'database_cleaner'
  gem 'email_spec'
end

group :production do
  gem 'rails_12factor'
end

gem 'high_voltage'

#Linkedin Logins
gem "linkedin"
gem "omniauth"
gem "omniauth-linkedin"

gem "omniauth-facebook"

#postgres use hstore in active record
#gem 'activerecord-postgres-hstore'

gem 'state_machine'
gem "ruby-graphviz"


#payments
#gem 'stripe',:git => 'https://github.com/stripe/stripe-ruby'

#gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anjlab/bootstrap-rails'

gem 'newrelic_rpm'

gem 'pgbackups-archive'

gem 'pg_search'

gem 'acts-as-taggable-on'

#gem 'activeadmin' , github: 'gregbell/active_admin'
gem "activeadmin", git: "https://github.com/gregbell/active_admin"

gem 'kaminari'
gem 'bootstrap-slider-rails'
gem 'bootstrap-sass', '~> 3.1.0'

回答1:

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 !

回答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:

Download and and extract the bootstrap to Rails.root/vendor/assets/bootstrap
Create file Rails.root/vendor/assets/javascripts/bootstrap.js file with contents like this:

//= require ../bootstrap/js/bootstrap.js
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');
}

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

application.js

//= require bootstrap

application.css

 *= require bootstrap

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

回答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"}/

回答4:

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

config/environments/production.rb

The line

config.serve_static_assets = false

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.

回答5:

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.

回答6:

i had the same issue :couldn't find file 'bootstrap-sprockets' with type 'application/javascript' The only solution was to comment off in the Gemfile gem 'sass-rails', '~> 5.0' and add instead gem 'sass-rails', '>= 3.2'

hope this helps other members

回答7:

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

I had to first delete the items in question from the "gemfile".
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.