Rails6 Bootstrap4 を使って Heroku で Deploy #Heroku

経緯

Rails6 で、Bootstrap4を利用していました。開発環境ではBootstrap4 が効いていたのですが Heroku へ Up した際にBootstrap4　が効かなくなってしまいました。解決できたのですが手順を忘れないようのメモです。

参考

環境

Ruby: 2.6.3
Rails: 6.0.0
Heroku: 7.29.0 linux-x64 node-v11.14.0

1. yarn add で Bootstrap を追加する

※ Rails で何かしの Project は、作成してあることを前提にします。 Rails new して･･･などは割愛します。

Bootstrap jQuery Popper.js を yarn で追加します。

$ yarn add bootstrap jquery popper.js

2. config/webpack/environment.js を編集する

config/webpack/environment.jsを編集して、jQuery と Popper.js を追記します。

config/webpack/environment.js

const { environment } = require('@rails/webpacker')


+ const webpack = require('webpack')


+ environment.plugins.append('Provide', new webpack.ProvidePlugin({
+    $: 'jquery/src/jquery',
+    jQuery: 'jquery/src/jquery',
+    Popper: ['popper.js', 'default']
+ }))

module.exports = environment

※開発環境では、この追記がなくても Bootstrap4 が効いてくれたのですが、なしで Heroku へ Deploy した際は、Bootstrap4 が効きませんでした。おそらくこの追記が大事だと推測しています。理由としては、「Rails5.1 + Webpacker で Bootstrap4-beta を読み込む」に記載してある

jQuery と Popper がグローバル変数として参照できないと、Bootstrap のエラーが console.log に吐かれて正常に読み込まれない。

なのかなー？と思っています･･･。
※ 違う可能性もおおいに高いので詳しい方いたら良ければコメントで教えていただけると光栄です。

3. app/javascript/packs/application.js を編集する

Bootstrap4 を import します。

app/javascript/packs/application.js

import "bootstrap"
import "../stylesheets/application"

4. app/javascript/stylesheets/application.scss を作成する。

app/javascript/ ディレクトリ内に、stylesheets フォルダを作成、その中に application.scss ファイルを作成し下記を追記します。
※ app/javascript/packs/application.js に import させる記述と合わせればフォルダ名とファイル名は任意で大丈夫だと思います。

appjavascript/stylesheets/application.scss

@import "~bootstrap/scss/bootstrap";

5. app/views/layouts/application.html.erb の Head 内の stylesheet_link_tag を書き換える。

記載されている stylesheet_link_tag を 'sylesheet_pack_tag' に書き換えます。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <%= display_meta_tags(default_meta_tags) %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= render 'layouts/header' %>
    <%= yield %>
  </body>
</html>

以上の状態で、git push heroku master したところ、ちゃんとBootstrap4が効いている状態になりました。実際、なぜ効いていなかった原因については良く分かっていなません。

詳しい方、教えていただけると光栄です。