[Rails6] Bootstrap4導入〜適用されているか確認まで

はじめに

https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a
こちらの記事を参照させていただいております。

筆者のver：　webpacker-4.3.0,　 Rails 6.0

Webpackerを用いての導入

yarn addでjQueryとBootstrapを加えます。Bootstrapが使用するpopper.jsも入れます。

ターミナル

$ yarn add jquery bootstrap popper.js

以下のようになれば成功です。

webpackの設定でProvidePluginを加えると、importやrequireなしで$やBootstrapのJavaScriptが使えるようになります。
下記のように、追記します。

config/webpack/environment.js

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

// jQueryとBootstapのJSを使えるようにする
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: 'popper.js'
  })
)
// ここまで

module.exports = environment

app/javascriptディレクトリの下にstylesheetsディレクトリを作り、application.scssを次のように記述します。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

application.jsに次の2行を加えます。

app/javascript/packs/application.js

import 'bootstrap';
import '../stylesheets/application';

レイアウトにstylesheet_pack_tagを加えます。

app/views/layouts/application.html.erb

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Bootstrapが適用されているか確認

Bootstrap公式

左下のGet startedをクリック

introductionページに飛んだら少し下にスクロール。
そして、Starter templateのコードをコピーします。

コピーしたコードをviewsファイルに貼り付けます。

※ちなみに２行目の"en"は英語表記の意味なので、日本語表記の"ja"に変更してください
するとブラウザにHello, worldが表示されます。

なんでもいいのですが
Bootstrap4のclass="display-1"属性を、h1要素に指定してみると、

テキストが大きくなりました！
これでBootstrapが適用されていることの確認ができました。
何も変わらなければ適用されていません。