【RubyonRails入門】Gemfileを用いてBootostrapを導入する方法

RailsにBootostrapを導入方法は、二つあります。

【方法1】HTMLにbootstrapのURLを追加する：★非推奨
【方法2】Gemfileに追加する：★★★推奨

今回は 『【方法2】Gemfileに追加する方法』 を記載します。

1. Gemfileに下記のパッケージを追加する

Gemfile

gem "sass-rails", "~>5.0"
gem "bootstrap-sass", "~>3.3.6"
gem "jquery-rails"
gem "jquery-ui-rails"

2.bundle updateする

Gemfileに追加があった場合に、パッケージたちをアップデートする

$ bundle update
Bundle updated!

※ 今はパッケージが入っただけなので、「CSSとJavaScriptを使用する」ことを別のファイルに書く必要がある。

3.ファイルの読み込み

3-1. .cssファイルを、.scssに書き換える

application.css => application.scssに書き換えます。

3-2. application.scssに読み込み

assets/stylesheets/application.scss

 @import "bootstrap-sprockets";
 @import "bootstrap";

3-3. application.jsに読み込み

assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery  <=これを追加
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets <=これを追加

//= => これはいろんなファイルを読み込んでいます。