Tech Racho エンジニアの「?」を「!」に。
  • 開発

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公式ドキュメントの歩き方+追加情報


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。