- IT Tips
READ MORE
Rails 5.1や5.2でrails new
した後でwebpackerでjQueryやBootstrap 4を足したくなったときの手順をメモします。Bootstrap 4のインストールは、できるだけTwitterリポジトリの公式情報に沿うようにしました。
brew install yarn
でyarnをインストールする(Macの場合)yarnがインストールされているかどうかはyarn -v
で確認できます。
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
は現在非推奨です。
require_tree .
の前の行に以下を追加する//= require jquery
//= require popper
//= require bootstrap
これは、後述のbootstrap-rubygemの設定を元にしました。元の設定ではrequire jquery3
ですが、Webpackerでインストールする場合はrequire jquery
にしないと動きませんでした。
なお、最後の//= require bootstrap
を//= require bootstrap-sprockets
にすると、コンパイルにSprocketsが使われます。
Twitterの公式リポジトリには以下の2つのgemがあります。今新たにRailsアプリを構築するなら、古いIEが対象でない限りBootstrap 4一択なので、bootstrap-rubygemを使います。
インストールはbootstrap-rubygemの公式に従います。なお、SASSはここまでに既にインストールされています。
bundle install
を実行する。gem 'bootstrap', '~> 4.1.3'
sprockets-railsは2.3.2以上が必要ですが、Rails 5.2なら3.2.1以降がインストールされるので問題はありません。
app/assets/stylesheets/application.css
の拡張子を.sass
または.scss
にリネームし(以下は.sass
が前提)、以下を追加する。
// Bootstrapのカスタム変数は"bootstrap"のインポートより前に行わなければならない
@import "bootstrap"
sassの場合、同じファイルのrequire行をすべて削除する(sassでは@import
で読み込むため)。
*= require_tree .
*= require_self
参考: Railsアプリで Bootstrap 4 を利用する