rails5でBootstrap4を使う

手順1


#bootstrap4をインストール
gem 'bootstrap', '~> 4.0.0'

#rails5.1以降はデフォルトでjQueryがインストールされてないのでインストール
gem 'jquery-rails'

でbundle install

手順2

app/assets/stylesheets/application.cssを app/assets/stylesheets/application.scssに変更


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

手順3

app/assets/stylesheets/application.scssの require_tree . require_selfを削除 @import “bootstrap”;を最終行に追加。

全体はこんな感じ。


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 * *requireは使わない
 * require_tree .
 * require_self
 */
 // Custom bootstrap variables must be set or imported *before* bootstrap.
  @import "bootstrap";

手順4

application.jsに下記を追加。


//= require jquery3
//= require popper
//= require bootstrap-sprockets

おわり。

See Also