CODEWITHSUNDEEP
ruby-on-railsrubygemstwitter-bootstrap-railshardcoded
Hummus
Hummus

Reputation: 365

Bootstrap Integration gem with Rails 4

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

Upvotes: 1

Views: 5801

Answers (4)

DavidVII
DavidVII

Reputation: 2283

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?

Upvotes: 0

Ronathan
Ronathan

Reputation: 634

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.

Upvotes: 0

Raja Hafify
Raja Hafify

Reputation: 29

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
*/

Upvotes: 0

DavidVII
DavidVII

Reputation: 2283

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.

Upvotes: 1

Related Questions