twitter-bootstrap-rails: error loading stylesheets

Question

I'm trying to use the Twitter-bootstrap-rails gem for the first time and I'm having some issues. I deleted all the stylesheets that rails generates except for application.css and I ran

rails g bootstrap:install less

to get the bootstrap_and_overrides.css.less file. According to the documentation you need to require bootstrap_and overrides in application.css which I did.

Application.css looks like this:

 *
 *= require_tree .
 *= require bootstrap_and_overrides.css.less
 *= require_self
 */

and bootstrap_and_overrides.css.less looks like this:

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

// bootstrap variables and mixins
@import "twitter/bootstrap/variables.less";
@import "twitter/bootstrap/mixins.less";

// other auto generated code below

The problem is that when I'm getting this error when I try to run the app:

NoMethodError in StaticPages#home
Showing /home/sheeka/Documents/workspace/my_projects/ruby/testapps/media_store/app/views/layouts/application.html.erb where line #5 raised:

undefined method `[]' for nil:NilClass

and line 5 points to

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

When I remove application.css everything loads with no problem but there's no bootstrap styling. Any help figuring this out would be much appreciated.

Answer 1

Have you tried disabling turbo-links? From what I understand turbo-links has known compatibility issues with javascript libraries like the foundation-rails gem, and the twitter-bootstrap gem.

http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

I would do that regardless of whether or not that fixes the problem, just to avoid any unnecessary hassle. (Unless you absolutely need turbolinks).

Lastly, the I would have your application.css file look like this:

 *
 *= require_tree .
 *= require_self
 *= require bootstrap_and_overrides.css.less
 */

I believe that tree and self should be required before bootstrap and overrides. I have gotten the same error thrown with foundation when I have not required it to load in the proper order in the asset pipeline. With the asset pipeline, basically the idea is that you always want the current controller specific stylesheet to be able to override whatever other stylesheets are in the app. I hope this ends up being helpful. This worked for me when I got this error.

http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives