前提・実現したいこと
ローカル環境では正しく描画されるのですが、
herokuにデプロイしたwebアプリが、正しくレイアウトされません。
有効にするためにはどうしたら良いでしょうか?
- webpackerでbootstrapを導入
記述しているコードの内容
現状、以下のURLを参考にコードを記述をしています。
https://qiita.com/mokuo/items/6d792986e63598370b30
StructureOfJavascriptDirectory
1app/javascript/ 2├── channels 3│ ├── consumer.js 4│ └── index.js 5├── packs 6│ └── application.js 7└── src 8 ├── js 9 │ ├── panel.js 10 │ └── user.js 11 └── application.scss
view
1 = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 2 = 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 '~@fortawesome/fontawesome-free/scss/fontawesome';
補足情報(FW/ツールのバージョンなど)
ちなみに下記のURLでも、同じherokuのデプロイで、回答を募集しております。
こちらはherokuのドキュメントを読みながら行い、要求された内容を実施していった結果発生したエラーです。
https://teratail.com/questions/278812
どちらのアプローチでもデプロイ自体は成功していますが、描画ができない。
回答1件
あなたの回答
tips
プレビュー