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

Question

I have a Rails 6 project with the default webpacker. I loaded bootstrap and jQuery by followign a tutorial and everything works locally. Here's the structure of the relevant files:
app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

#This file that is being imported handles importing in bootstrap and custom CSS files
import '../stylesheets/application'

app/javascript/stylesheets/applications.scss

@import "~bootstrap/scss/bootstrap";
#files below are custom css files
@import "reset";
@import "general";
@import "header";
@import "menu-overlay";

It works locally but when I deploy it to Heroku, the bootstrap styles nad my custom css do not show up.

Things I've tried
1) I've tried running rake assets:precompile locally then deploying it again
2) I've tried running the rake assets precompile in the Heroku CLI: heroku rake assets:precompile --app staging-app
3) I've added this line to my environments/production.rb file config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

I noticed that whenever I make any changes locally to my assets, the console shows webpacker compiling.. Could it be Heroku is not running my webpacker compile?

Do I have to add a dependency to start he webpacker server in production in my package.json file?

"dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.2"
  }

Thanks for any inputs!

Edit 1 Here is the output of my heroku logs:

-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.6.3
-----> Installing dependencies using bundler 1.17.3
       Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
       The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
       Using rake 13.0.0
       Using concurrent-ruby 1.1.5
       Using i18n 1.7.0
       Using minitest 5.12.2
       Using thread_safe 0.3.6
       Using tzinfo 1.2.5
       Using zeitwerk 2.1.10
       Using activesupport 6.0.0
       Using builder 3.2.3
       Using erubi 1.9.0
       Using mini_portile2 2.4.0
       Using nokogiri 1.10.4
       Using rails-dom-testing 2.0.3
       Using crass 1.0.4
       Using loofah 2.3.0
       Using rails-html-sanitizer 1.2.0
       Using actionview 6.0.0
       Using rack 2.0.7
       Using rack-test 1.1.0
       Using actionpack 6.0.0
       Using nio4r 2.5.2
       Using websocket-extensions 0.1.4
       Using websocket-driver 0.7.1
       Using actioncable 6.0.0
       Using globalid 0.4.2
       Using activejob 6.0.0
       Using activemodel 6.0.0
       Using activerecord 6.0.0
       Using mimemagic 0.3.3
       Using marcel 0.3.3
       Using activestorage 6.0.0
       Using mini_mime 1.0.2
       Using mail 2.7.1
       Using actionmailbox 6.0.0
       Using actionmailer 6.0.0
       Using actiontext 6.0.0
       Using msgpack 1.3.1
       Using bootsnap 1.4.5
       Using bootstrap_form 4.3.0
       Using bundler 1.17.3
       Using dotenv 2.7.5
       Using method_source 0.9.2
       Using thor 0.20.3
       Using railties 6.0.0
       Using dotenv-rails 2.7.5
       Using erubis 2.7.0
       Using ffi 1.11.1
       Using temple 0.8.2
       Using tilt 2.0.10
       Using haml 5.1.2
       Using sexp_processor 4.13.0
       Using ruby_parser 3.14.0
       Using html2haml 2.2.0
       Using haml-rails 2.0.1
       Using jbuilder 2.9.1
       Using pg 1.1.4
       Using puma 3.12.1
       Using rack-proxy 0.6.5
       Using sprockets 3.7.2
       Using sprockets-rails 3.2.1
       Using rails 6.0.0
       Using rb-fsevent 0.10.3
       Using rb-inotify 0.10.0
       Using sass-listen 4.0.0
       Using sass 3.7.4
       Using sass-rails 5.1.0
       Using turbolinks-source 5.2.0
       Using turbolinks 5.2.1
       Using webpacker 4.0.7
       Bundle complete! 26 Gemfile dependencies, 69 gems now installed.
       Gems in the groups development and test were not installed.
       Bundled gems are installed into `./vendor/bundle`
       Bundle completed (0.47s)
       Cleaning up the bundler cache.
       The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
-----> Installing node-v10.15.3-linux-x64
-----> Installing yarn-v1.16.0
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.16.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.2.9: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > webpack-dev-server@3.8.2" has unmet peer dependency "webpack@^4.0.0".
       warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
       [4/4] Building fresh packages...
       Done in 21.74s.
       Compiling…
       Compiled all packs in /tmp/build_779b19b5de4194c7cd435766a173995c/public/packs
       Asset precompilation completed (45.01s)
       Cleaning assets
       Running: rake assets:clean
-----> Detecting rails configuration
###### WARNING:
       You set your `config.active_storage.service` to :local in production.
       If you are uploading files to this app, they will not persist after the app
       is restarted, on one-off dynos, or if the app has multiple dynos.
       Heroku applications have an ephemeral file system. To
       persist uploaded files, please use a service such as S3 and update your Rails
       configuration.

       For more information can be found in this article:
         https://devcenter.heroku.com/articles/active-storage-on-heroku

###### WARNING:
       We detected that some binary dependencies required to
       use all the preview features of Active Storage are not
       present on this system.

       For more information please see:
         https://devcenter.heroku.com/articles/active-storage-on-heroku

###### WARNING:
       No Procfile detected, using the default web server.
       We recommend explicitly declaring how to boot your server process via a Procfile.
       https://devcenter.heroku.com/articles/ruby-default-web-server
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> console, rake, web
-----> Compressing...
       Done: 61.3M
-----> Launching...
       Released v17
       https://career-lode-stage.herokuapp.com/ deployed to Heroku

As for errors in the console, there's no error. I ran heroku logs --app staging and there were no errors. I also opened up the inspector and there were no errors

Edit 3 I've added a test javascript file in packs which I then imported in from my application.js file:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

import './test.js'
import '../stylesheets/application'

In my test.js file I had some code which output to the console and it works. I would expect it to not work if the css fiels are not working/brought it but it seems that the javascript files works.

Answer 1

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'

Answer 2

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:)

Answer 3

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.

Answer 4

If you are updating an old application, or working on something non standard, I've found that the order of the buildpacks on Heroku matters. So you need make sure that the heroku/nodejs buildpack is listed before the heroku/ruby one. This alone fixed the issue for me.