Rails 5: Assets + Bower + Bootstrap Sass

Question

There are already similar questions on SO, but not enough clear responses to understand the following issue.

My goal is to setup Rails 5 with Bootstrap using Bower.

Using Bower I installed Bootstrap in the the folder:

vendor/assets/bower_components/bootstrap-sass

Then, I updated initializers/assets:

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

Then I added the gem 'sass-rails' to Gemfile and updated application.js:

//= require jquery
//= require bootstrap-sass/assets/javascripts/bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .

The assets for JS seem to be working well: if I load http://localhost:3000/assets/application.js I can see that the Bootstrap JS part has been added there.

The problem is about Sass (SCSS): I added bootstrap-sass/assets/stylesheets/bootstrap into application.css.scss but with no success:

 /*
 *= require_tree .
 *= require_self
 @import "bootstrap-sass/assets/stylesheets/bootstrap";
 */

in fact if I load http://localhost:3000/assets/application.css I see:

/*
 @import "bootstrap-sass/assets/stylesheets/bootstrap";
 */

(the folder specified on the @import is containing many _*.scss files and a mixins folder)

The questions are:

• Do you have any ideas why this is not working?
• should not I see on assets/application.css all the CSS precompiled?

PS: Any resource to understand the issue would be much appreciated.

Answer 1

Move the import, so it's outside the /* .. */

/*
 *= require_tree .
 *= require_self
*/

@import "bootstrap-sass/assets/stylesheets/bootstrap";

Answer 2

[Removed misleading instructions to use require instead of import, as I was wrong.]

In addition to the accepted answer, if you look into the bootstrap-sass/assets/stylesheets directory, you'll notice that there is no file bootstrap.scss but rather one prefixed with an underscore.

Also, usually it's better to import only modules you actually need from the bootstrap-sass/assets/stylesheets/bootstrap/ directory instead of the main _bootstrap.scss file.