Bootstrap4をRailsに反映させる方法

5819 ワード
Rails udemy Rails テキストリンク

Udemy:「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう」を学んで詰まったところを書いていきます。今回はBootstrapの適用方法についてです。

Bootstrapが反映されない

こちらの方の記事を参考にしたら反映させることができました！私がやった手順を下記に記します。

1.まずyarnパッケージからjqueryとbootstrapをインストールする

$ yarn add jquery popper.js bootstrap

2.Gemfileに下記を記述し、bundle installを実行

gemfile
gem 'bootstrap-sass'
gem 'jquery-rails'
console画面
$bundle install

3.environment.jsに下記を記述

config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

4.application.jsに下記を記述

javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap/dist/js/bootstrap.min.js')

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap/dist/js/bootstrap.min.js')

こうしたらやっとbootstrapが適用されました、、ちなみにindex.html.rbはこのようになっています。

<h2>Questions</h2>
    <div class="row">
        <div class="col-md-12">
        <table class="table table-striped">
            <thead class="thead-light">
                <tr>
                <th scope="col ">ID</th>
                <th scope="col">Title</th>
                <th scope="col">Menu</th>
                </tr>
            </thead>
    <tbody>
                <tr>
                    <% @questions.each do|question| %>
                        <th scope="row"><%= question.id%></th>
                        <td><%= question.title%></td>
                        <td>[Edit][Delete]</td>  
                        <br>
                </tr>
                    <%end%>
    </tbody>

    </table>

     </div>
    </div>

結果として下記の画像のようになりました！！！Webpackを使った場合と通常の場合だとbootstrapのインポートの仕方が異なるみたいですね。。

参考文献