Why doesn't bootstrap-sass work with Rails?

Question

I've added bootstrap-sass to my gemfile. I've followed the instructions here https://github.com/twbs/bootstrap-sass. Modifications have been made to the javascript/application.js.scss and stylesheet/application.css.scss files per the above link.

When I try to view a new controller, I get this:

Sass::SyntaxError in Test#index Showing /Users/myuser/Rails/myproject/app/views/layouts/application.html.erb where line #5 raised:

File to import not found or unreadable: bootstrap-sprockets.

*/ @import "bootstrap-sprockets"; @import "bootstrap";

I haven't added any bootstrap code to the Rails app yet. It's a new Rails app with only the above modifications and one new controller.

I did run bundle install but it seemed to not install anything. The output was this:

Bundle complete! 13 Gemfile dependencies, 56 gems now installed. Use bundle show [gemname] to see where a bundled gem is installed.

along with a bunch of Usings. I did see these entries:

Using bootstrap-sass 3.3.5.1
Using bootstrap-sass 0.0.2

Any idea why I'm getting the above error?

javascript/application.js.scss is not a CSS file, it's javascript. You only change your CSS file extension to use SCSS. — vanburen
You may restart your server like this suggestion stackoverflow.com/questions/26135126/… — Hieu Pham
I've renamed the files. Restarted the server. Yes - sass-rails is in the gem file. Still no change. — 4thSpace

AndreiMotinga AndreiMotinga · Accepted Answer · 2015-11-21T17:16:11

you got your files a bit wrong.

make sure you have 'app/assets/javascripts/application.js with the following content

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap-sprockets
//= require_tree .

and 'app/assets/stylesheets/application.scss' with following

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 */
@import "bootstrap-sprockets";
@import "bootstrap";

pay attention to file names and extensions

Why doesn't bootstrap-sass work with Rails?

1 Answers