Home>

It is drawn correctly in the local environment,
The web app deployed on heroku is not laid out correctly.
What can I do to enable it?

  • Introducing bootstrap with webpacker
Contents of code being written

Currently, I am writing the code with reference to the following URL.
https://qiita.com/mokuo/items/6d792986e63598370b30

app/javascript/
├── channels
│ ├── consumer.js
│ └── index.js
├── packs
│ └── application.js
└── src
    ├── js
    │ ├── panel.js
    │ └── user.js
    └── application.scss
  = stylesheet_pack_tag'application', media:'all','data-turbolinks-track':'reload'
    = javascript_pack_tag'application','data-turbolinks-track':'reload'
//environment.js
const {environment} = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $:'jquery/src/jquery',
        jQuery:'jquery/src/jquery',
        Popper: ['popper.js','default']
    })
)
module.exports = environment
//application.js
require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
import'bootstrap'
import'@fortawesome/fontawesome-free/js/all'
import'../src/application.scss'
import'src/js/panel'
import'src/js/users'
//application.scss
@import'~bootstrap/scss/bootstrap';
@import'[email protected]/fontawesome-free/scss/fontawesome';
Supplemental information (FW/tool ​​version, etc.)

Current screen

By the way, we are also looking for answers with the same heroku deployment at the following URL.
This is an error that occurred as a result of performing the requested content while reading the heroku document.
https://www.tutorialfor.com/go.php?id=278812

Both approaches have been successful in deploying, but I can't draw.