Bootstrapとはそこそこデザインの良いWebの画面を作成するためのフレームワークです。
これを使うことによってCSSを触らなくてもデザインを整えることができます。
それでは導入方法を説明しいきます！
⚠︎WebpackerがRails5.1から標準でサポートされている状態です。
#1 BootstrapをWebpackerで導入
まずはconsoleで
gem 'webpacker', '~> 4.0'
をやりますが、先ほど説明した通り、Rails5.1以降標準でサポートされているため、デフォルトでGemが追加されています。
それではGemfileにwebpackerというgemがあることを確認できたらjQueryとBootstrapを導入します。
yarn add jquery bootstrap popper.js
次にconfig/webpack/environment.js に以下のコードを追加してください。
const { environment } = require('@rails/webpacker')
module.exports = environment
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
#2 Bootstrapのstyleをimport
次に、app/javascript/stylesheets/application.scssにBootstrapのstyleをimportする記述を追記します。
このapp/javascript/stylesheetsディレクトリ及び、app/javascript/stylesheets/application.scssファイルは存在しないので以下のコマンドで作成します。
mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss
作成したら、app/javascript/stylesheets/application.scssファイルに以下のコードを追加してください。
@import '~bootstrap/scss/bootstrap';
#3 application.jsにコードを追加
yarn でインストールしたBootstrapのパッケージを利用できるようにimportします。
次にapp/javascript/packs/application.js に以下のコードを追加してください。
import 'bootstrap';
import '../stylesheets/application';
#4 レイアウトに stylesheet_pack_tag を追加
app/views/layouts/application.html.erb に以下のコードを追加してください。
<!DOCTYPE html>
<html>
<head>
<title>Kanban</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%# ここに追加する %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
以上がBootstrapの導入法です！