Bower, Bootstrap and sass-rails gem, error: “File to import not found or unreadable: bootstrap”

Question

In short I am trying to find out why I get the error:

File to import not found or unreadable: bootstrap

This is the full description:

1) I am managing my Javascript libraries using Bower, so I put bootstrap dependency inside the bower.js:

   ... 
   "dependencies": {
    "bootstrap": "~3"
    }
   ...

and I inserted in application.rb

config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

2) Rails4 is using the gem 'sass-rails' to manage Sass:

# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'

3) I also added

@import "bootstrap";

.field_with_errors {
  @extend .has-error;
}

to make bootstrapt-compatible with the rails-forms (see https://gorails.com/blog/trying-out-bootstrap-3-0 )

---

What I get is the error:

File to import not found or unreadable: bootstrap.

Apart from the specific error, It would be really appreciate an explanation about Bower and sass-rails can collaborate together without problem (I didn't find any good resource on the web).

Answer 1

Open your /assets/stylesheets/application.css file and add the following line:

*= require bootstrap-sass-official/assets/stylesheets/bootstrap.scss

The application.css file must contain the directives which indicate which resources should be loaded by your application.