Rails5.1/5.2: `rails new`した「後に」yarn/webpackerでjQueryとBootstrap 4を追加する

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を使います。

インストールは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 を利用する

関連記事

Rails 5: Webpacker公式README — Webpack v4対応版(翻訳)

【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ