注意点
本投稿ではWebpackerがインストールされてないRails5以前のアプリを対象にBootstrap4を導入する手順を掲載しております。
Webpackerが標準となったRails6アプリにBootstrap4を導入する際には以下の記事がとても参考になりました🙇♂️
RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう - Qiita
はじめに
Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。
公式サイト
Bootstrap · The most popular HTML, CSS, and JS library in the world.
注意点
投稿時点でのBootstrapのバージョンはv4.0.0-beta.24.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に追記する。
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
$ bundle install
注意点
sprockets-railsがv2.3.2.以上である必要がある。
$ bundle show |fgrep sprockets-rails
* sprockets-rails (3.2.1)
application.scss
Railsアプリの作成時に生成されるapplication.cssをapplication.scssにリネームするなどして、.scss(Sass構文の場合は.sass)ファイルを用意する。
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
app/assets/stylesheets/application.scssでbootstrapをimportさせる。
// 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に追記する
//= require jquery3
//= require popper
//= require bootstrap-sprockets
補足
- Bootstrapのtooltipsやpopoverはpopper.jsに依存している
- bootstrapの依存gemにpopper_jsが指定されているため新たにインストールは不要
- コンパイルを高速化したい場合はbootstrap-sprocketsの代わりにbootstrapを指定する
さいごに
Bootsrap3のサイトで利用していたコードを今回構築したBootstrap4環境に適用してみました。見た目に大きな変化はありませんが、4のほうが色合いが鮮やかですね。
