初めに
Railsでwebpackerを使ってBootstrap4の導入方法のまとめ。
導入手順
- Gemfileにwebpackerを追加して、インストール
（今回は既に入っていたので、飛ばしてます。）
gem 'webpacker', '~> 3.5
- bundle installの実行
- Webpackerをプロジェクトにインストール
bundle exec rails webpacker:install
これでWebpackerを実行するための各種ファイルが生成。 - app/javascript以下にsrcというディレクトリを作成し、application.scssを作成。
ディレクトリはapp/javascript/src/application.scssとなる。 - Bootstrapの導入
yarn add bootstrap@4.3.1 jquery popper.jsを実行 - BootstrapのJSをapp/javascript/packs/application.jsで、
CSSをapp/javascript/src/application.scssでインポート
app/javascript/packs/application.js
import 'bootstrap'
import '../src/application.scss'
app/javascript/src/application.scss
@import '~bootstrap/scss/bootstrap';
をそれぞれ追記。
6. アプリケーションがWebpackerでビルドしたJS/CSSを読み込むよう設定する。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>RailsBootstrapTemplate</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
+ <%= javascript_pack_tag 'application' %>
+ <%= stylesheet_pack_tag 'application' %>
</head>
<body>
<%= yield %>
</body>
</html>
以上。