Search code examples
cssruby-on-railsrubytwitter-bootstrapheroku

bootstrap styles missing after deploy to Heroku

Based on the googling I've been doing for the past two days, I am joining the hundreds (if not thousands) of people who lost bootstrap styling when deploying to Heroku. As is true of everyone else, the bootstrap styling works fine on the local machine, but is absent on the deployed heroku site. I am stumped. I am using rails 4.2.4 and ruby 2.2.3. (I am also using RubyMine if that makes a difference. I don't think it does. I tried a deploy with "plain" git and sublime and it made no difference.) Here is what I have done:

  1. I have links to the maxcdn in my application.html.erb (both css and js)
  2. I changed the name of application.css to application.scss (and I also tried application.css.scss)
  3. I added the @import directives (boostrap-sprockets and bootstrap) to application.scss
  4. I added //= require bootstrap-sprockets to application.js (after the turbolinks entry).
  5. I added gems bootstrap-sass, autoprefixer-rails, and rails_12factor and did bundle install
  6. I changed config.assets.compile from false to true in config/environments/production.rb
  7. I also tried precompiling assets, but the bootstrap styling was still missing.

I believe that is all I should have to do to get it working. As mentioned above, it works fine on the local machine.

I've tried many solutions suggested on the web that have not worked. It's hard to tell which ones are applicable because this seems to have been a problem for several years (my google searches return questions like this, and suggested solutions, from 2012 to the present). I'm sure some of those solutions are no longer applicable (for rails v4).

As usual, any help is appreciated.

Solution

  • Try to start a project from scratch and to just make Bootstrap working in production. I succeeded to do that with the maxcdn method.

    Here is what I did to include the bootstrap maxcdn :

    app/views/layouts/application.html.erb, at the end of the <head> tag :

    <!-- BOOTSTRAP -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>

    I only did this, and nothing else. It worked like a charm, even in production on Heroku.