Ruby on Rails error when importing “bootstrap”

Question

I'm new to ruby on rails, and currently following Michael Hartl's tutorial and unfortunately get stuck on chapter five when I try to call the @import "bootstrap"; in the custom.css.scss file.

I get the following error:

Sprockets::Rails::Helper::AssetFilteredError in StaticPages#home
  Showing /Users/name/Documents/Rails_projects/sample_app/app/views/layouts    /application.html.erb where line #5 raised:
Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( glyphicons-halflings.png )` to `config/initializers/assets.rb` and restart your server
      (in /Users/name/Documents/Rails_projects/sample_app/app/assets/styleshee
/custom.css.scss)
     Extracted source (around line #5):

line 5:    stylesheet_link_tag    "application", media: "all"

Having combed the internet I've tried the following solutions, none of which worked

1. the suggestion provided above for the assets.rb file
2. restarting the server with control+c
3. moving the gem file 'bootrap-sass'into the section in gem file for assets not required in product
4. changing the extension name of the application.css file to application.css.scss
5. directly calling @import “bootstrap”; in the application.css.scss file
6. adding to config.ru the following: require 'bootstrap-sass' #require statement of bootstrap-sass

These are all solutions I found on the web, but none work.

Appreciate any help!

Thank you!

Answer 1

Don't know if you were able to get the issue sorted out, but this is what I did to get things working.

the error

Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( glyphicons-halflings.png )` to `config/initializers/assets.rb` and restart your server

tells you to actually put

Rails.application.config.assets.precompile += %w( glyphicons-halflings.png )

in your

config/initializers/assets.rb path

After I did that, I got another similar error but this time with another line to be added.

Rails.application.config.assets.precompile += %w( glyphicons-halflings-white.png )

Now, you also need to make sure that you the @import "bootstrap"; line in your application.css file in path app/assets/stylesheets/ directory and rename the file to application.css.scss

After putting these above both Rails.application.config.assets.precompile lines in the config/initializers/assets.rb file and then restarting the server, it actually worked for me. Hope it helps!

Answer 2

Another way of integrating bootstrap with Rails 4.x is:

download the bootstrap version you want. unzip the file and save it in your local machine. Then move the documents to the relevant folders in your asset pipeline. Like this:

move all javascript files (the file extension ends with .js ) to app/assets/javascripts

move all css files(file extension ends with .css ) to app/assets/stylesheets

move all images to app/assets/images .

inside the app/assets/stylesheets , create a custome file custom.css . you can use the file to override bootsrap functionality. you won't need the @import method. you also don't need to add a gem in your in your Gemfile . just download the version of bootstrap you want and follow the directions above.

I believe the tutorial uses bootstrap 2.3