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 を利用する