Search code examples
ruby-on-railsherokuassets

Stylesheets not working after Rails app pushed to Heroku


I changed my rails app to production mode then deployed it to Heroku and found that the assets apparently weren't being accessed in production mode. I was able to solve this issue by precompiling the assets, but now after changing something then pushing to Heroku I'm back to square one and css and bootstrap are not working. All the links in my head look like this:

<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'style', media: 'all', 'data-turbolinks-track': 
'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> . 
</script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> . 
</script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" 
rel="stylesheet">

It seems the stylesheets are not loading for some reason, but most of the images are, so I guess it's not all of the assets. I've tried to find a clue to the issue by looking in the logs, but I can't recognise anything amiss. Please help with suggestions, I'm not sure what to try next, thanks :-)


Solution

  • In your stylesheet link tag, try changing 'style' to 'application'

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

    By loading in the application stylesheet you are loading in all custom stylesheets as well, as long as you have:

    *= require_tree .
    *= require_self
    

    included in the application.scss file.

    http://guides.rubyonrails.org/asset_pipeline.html#in-production