Rails
bootstrap4

Railsアプリで Bootstrap 4 を利用する

rails-bootstrap.png

はじめに

Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。

公式サイト

Bootstrap · The most popular HTML, CSS, and JS library in the world.

注意点

投稿時点でのBootstrapのバージョンはv4.0.0-beta.2 4.1.1です。

gem

これまでrailsにBootstrapを導入する際にはbootstrap-sassを利用してましたが、READMEに「Bootstrap 4ではbootstrap-rubygemを利用してね」と案内がありました。

Bootstrap Gem GitHub
2~3 bootstrap-sass twbs/ bootstrap-sass
4 bootstrap twbs/ bootstrap-rubygem

導入手順

bootstrap-rubygemのREADME通りに進めていきます。

Gemfile

Gemfileでbootstrapを指定してインストールする。
BootstrapはjQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する。

Gemfile
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
$ bundle install

注意点
sprockets-railsv2.3.2.以上である必要がある。

`sprockets-rails`バージョン確認方法
$ bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.1)

application.scss

Railsアプリの作成時に生成されるapplication.cssapplication.scssにリネームするなどして、.scss(Sass構文の場合は.sass)ファイルを用意する。

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

app/assets/stylesheets/application.scssでbootstrapをimportさせる。

/assets/stylesheets/application.scss
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

注意点
- Sassファイルでは*= require*= require_treeを削除する
- Sassファイルではインポートに@importを利用する
- Sassファイルで*= requireを利用すると他のスタイルシートではBootstrapのmixinや変数を利用できなくなる

application.js

Bootstrapと依存関係をapplication.jsに追記する

app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets

補足
- Bootstrapのtooltipsやpopoverはpopper.jsに依存している
- bootstrapの依存gemにpopper_jsが指定されているため新たにインストールは不要
- コンパイルを高速化したい場合はbootstrap-sprocketsの代わりにbootstrapを指定する

さいごに

Bootsrap3のサイトで利用していたコードを今回構築したBootstrap4環境に適用してみました。見た目に大きな変化はありませんが、4のほうが色合いが鮮やかですね。

bootstrap3-4.png