注意点
本投稿では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.
以上である必要がある。
$ 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のほうが色合いが鮮やかですね。