@fukutechの技術ブログ

概要

  • RailsでBootstrap4を使いたい時の流れと注意事項についてまとめた。

内容

(1) Gemについて

  • Bootstrap 4からはgem 'bootstrao-sass'ではなくgem 'bootstrap'を用いることを推奨
  • BootstrapはjQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する。
  • sprockets-railsがv2.3.2.以上である必要がある。
 # 以下のコマンドでsprockets-railsのバージョン確認が可能。  
 $ bundle show |fgrep sprockets-rails  
   * sprockets-rails (3.2.1)  

(2) application.scssについて

<STEP 1>

  • Railsアプリの作成時に生成されるapplication.cssapplication.scssにリネームするなどして、.scss(Sass構文の場合は.sass)ファイルを用意する。
    # ファイル名を変更するコマンド  
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss  

<STEP 2>

  • app/assets/stylesheets/application.scssでbootstrapをimportさせる。
  • Sassファイルでは*= require*= require_treeを削除する
  • Sassファイルではインポートに@importを利用する
  • Sassファイルで*= requireを利用すると他のスタイルシートではBootstrapのmixinや変数を利用できなくなる
  • Bootstrap4では、@import "bootstrap-sprockets";を入れないことに注意
    • 入れてみるとエラーが発生した(下図)
    • おそらく、Bootstrap4になったことでbootstrap-sass用の初期化処理であるbootstrap-sprocketsが不必要となったのではないかと推察。
    • 参考URL:(Ruby on Rails) Bootstrapが上手く動かない
 // Custom bootstrap variables must be set or imported *before* bootstrap.  
 @import "bootstrap";  

(3) application.jsについて

  • Bootstrapとの依存関係をapplication.jsに追記する
    • Bootstrapのtooltipsやpopoverはpopper.jsに依存している
    • bootstrapの依存gemにpopper_jsが指定されているため新たにインストールは不要
 //= require jquery3  
 //= require popper  
 //= require bootstrap  

参考URL

このログへのコメント

コメントはありません