注意点
本投稿では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.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に追記する。
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
$ bundle install
注意点
sprockets-railsがv2.3.2.以上である必要がある。
```shell-session:sprockets-railsバージョン確認方法
$ bundle show |fgrep sprockets-rails
- sprockets-rails (3.2.1)
## application.scss
Railsアプリの作成時に生成される`application.css`を`application.scss`にリネームするなどして、`.scss`(Sass構文の場合は`.sass`)ファイルを用意する。
```shell-session
$ 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のほうが色合いが鮮やかですね。
