- IT Tips
READ MORE
Rails 5.1や5.2でrails newした後でwebpackerでjQueryやBootstrap 4を足したくなったときの手順をメモします。Bootstrap 4のインストールは、できるだけTwitterリポジトリの公式情報に沿うようにしました。
1. jQueryをWebpackerで後から追加する
- yarnがインストールされていない場合は
brew install yarnでyarnをインストールする（Macの場合）
yarnがインストールされているかどうかはyarn -vで確認できます。
- Gemfileに
gem 'webpacker', github: 'rails/webpacker'を追加し、bundle installを実行する
webpackerはすべての環境で使うので、上の設定はgroupの外に追加します。
- プロジェクトディレクトリで
rails webpacker:installを実行し、Webpackerをインストールする
以下が追加・更新されます。
A .babelrc
A .browserslistrc
M .gitignore
A .postcssrc.yml
A app/javascript/packs/application.js
A bin/webpack
A bin/webpack-dev-server
A config/webpack/development.js
A config/webpack/environment.js
A config/webpack/production.js
A config/webpack/test.js
A config/webpacker.yml
M package.json
A yarn.lock
yarn add jqueryを実行し、jQueryをインストールする
package.jsonとyarn.lockが更新されます。なお、yarn installは現在非推奨です。
- app/assets/javascripts/application.jsの
require_tree .の前の行に以下を追加する
//= require jquery
//= require popper
//= require bootstrap
これは、後述のbootstrap-rubygemの設定を元にしました。元の設定ではrequire jquery3ですが、Webpackerでインストールする場合はrequire jqueryにしないと動きませんでした。
なお、最後の//= require bootstrapを//= require bootstrap-sprocketsにすると、コンパイルにSprocketsが使われます。
2. Bootstrap 4をインストールする
Twitterの公式リポジトリには以下の2つのgemがあります。今新たにRailsアプリを構築するなら、古いIEが対象でない限りBootstrap 4一択なので、bootstrap-rubygemを使います。
- twbs/bootstrap-sass — Bootstrap 2と3
- bootstrap-rubygem — Bootstrap 4
インストールはbootstrap-rubygemの公式に従います。なお、SASSはここまでに既にインストールされています。
- Gemfileに以下を追加して
bundle installを実行する。
gem 'bootstrap', '~> 4.1.3'
sprockets-railsは2.3.2以上が必要ですが、Rails 5.2なら3.2.1以降がインストールされるので問題はありません。
- Bootstrapのスタイルをインポートする
app/assets/stylesheets/application.cssの拡張子を.sassまたは.scssにリネームし（以下は.sassが前提）、以下を追加する。
// Bootstrapのカスタム変数は"bootstrap"のインポートより前に行わなければならない
@import "bootstrap"
sassの場合、同じファイルのrequire行をすべて削除する（sassでは@importで読み込むため）。
*= require_tree .
*= require_self
参考: Railsアプリで Bootstrap 4 を利用する