Bootstrap Integration gem with Rails 4

Question

I recently attended a hackathon, and we a made a web application in rails. We were all new to rails and were not aware of the bootstrap gem, and thus we hard coded the bootstrap style sheet in the assets folder.

In an effort to learn Rails, further, I'm continuing with the app. I have deleted the .css file, and added the gem to my Gemfile. I've ran bundle install and imported the files using the '@import' command in another CSS file.

When I run the rails server and navigate to my homepage, I get an error:

    Sass::SyntaxError in Pages#rootpage

Showing C:/Users/User/Documents/SoapBox/app/views/layouts/application.html.erb where line #6 raised:

File to import not found or unreadable: bootstrap.

Load paths:
  C:/Users/Soham/Documents/SoapBox/app/assets/images
  C:/Users/Soham/Documents/SoapBox/app/assets/javascripts
  C:/Users/Soham/Documents/SoapBox/app/assets/stylesheets
  C:/Users/Soham/Documents/SoapBox/vendor/assets/javascripts
  C:/Users/Soham/Documents/SoapBox/vendor/assets/stylesheets
  C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/turbolinks-1.3.0/lib/assets/javascripts
  C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/jquery-rails-3.0.4/vendor/assets/javascripts
  (in C:/Users/Soham/Documents/SoapBox/app/assets/stylesheets/styles.css.scss:2)
`File to import not found or unreadable: bootstrap`.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Oswald:700,300' rel='stylesheet' type='text/css'>
<%= favicon_link_tag "favicon.png", :type => "image/png", :rel => "icon" %>
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>

I don't understand why the error is occurring.

Any help would be much appreciated!

Thanks!

SohamK

Answer 1

Add the extension .scss to application.css. If you deleted it, then add it again.

It should look like this:

#application.css.scss
/*
 *
 *= require_self
 *= require_tree .
*/

@import "bootstrap";

...

It is VERY important to use that import in an .scss file. Otherwise it won't work.

Make sense?

Answer 2

I recommend watching this: RailsCast

It mentions installing bootstrap like this:

#commandline
rails g bootstrap:install

If it doesn't work after that then try adding this to your less file.

#css NOT scss   
@import "twitter/bootstrap/bootstrap";

Remember, that gem is in less. Importing less files into your scss file will break.

Answer 3

Although this will not answer your question regarding your error, I much prefer to simply include the Bootstrap File in your 'Vendor' assets folder (in which it is common practice to put anything not coded by you in there like JQuery).

I prefer this because when Twitter-Bootstrap has an update, it is much simpler to just delete the files. Also, it is much nicer to see your CSS files in whatever editor you are using.

Answer 4

Update: Since you are already using bootstrap-sass, it shouldn't have any problem. Can you paste the content of your styles.css.scss

Original: You might need bootstrap-sass instead of bootstrap-rails gem if u want to import it to custom stylesheet.

#Gemfile
group :assets do
  gem 'bootstrap-sass'
end

# app/assets/stylesheets/styles.css.scss
@import 'bootstrap';
@import 'bootstrap/responsive';

If you use want to use bootstrap-rails gem, you need to import inside sprocket in application.css

# Gemfile
group :assets do
  gem 'bootstrap-rails'
end

# app/assets/stylesheets/application.css

/*
*= require bootstrap
*= require bootstrap/responsive
*/