CSS and Bootstrap not loading in Rails 6 app when deployed to Heroku

Dang it. The reason why its not loading in Heroku was because I still used stylesheet_link_tag instead of stylesheet_pack_tag in my application.html file in my layout folder.

So in local development, since there is a webpack-dev-server, it compiles it. However, in heroku, I have to specify it and I can do this if I change the stylesheet_link_tag to use stylesheet_pack_tag instead.

 = stylesheet_pack_tag "application", media: 'all', 'data-turbolinks-track': 'reload' = javascript_pack_tag "application", 'data-turbolinks-track': 'reload'

I had the same problem and solved it by leaving the stylesheet_link_tag as is, but adding:

@import "bootstrap/scss/bootstrap.scss";

To my application.scss file in app/assets/stylesheets folder.

Had same problem! Heroku needs both solutions mention above:

layouts>application.html.erb

stylesheet_pack_tag "application", media: 'all', 'data-turbolinks-track': 'reload'

-and-

assets/stylesheets/application.scss

-or- (where ever your main stylesheet exists)

assets/javascript/stylesheets/application.scss

@import "bootstrap/scss/bootstrap.scss";

You'll notice that your local dev server will need the <%= stylesheet_link_tag ... %>

just switch it out for the <%= stylesheet_pack_tag ... %> when pushing to Heroku for production.

Hope this clarifies :)