よこのじ.work

Web開発、Google Apps Script、ブロックチェーンの情報発信

Ruby on RailsでBootstrapを導入する方法【手順どおりで簡単に】

よこのじ（@yokonoji_work）です。

Ruby on RailsでBootstrapを導入する方法をご紹介します。

いくつかのファイルを編集しますが、手順通りに進めていけば簡単にBootstrapを導入することができます。

目次

GemfileにBootstrapを追加する

GemfileにBootStrapと、依存関係にあるjQueryを追加します。

gem 'bootstrap'
gem 'jquery-rails'

Gemfileを保存したら、bundle installでgemをインストールします。

$ bundle install

application.scssでBootstrapをインポートする

mvコマンドでファイル名の変更を行います。

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

application.cssをapplication.scssに変更したら、application.scssから次の記述を削除します。ファイルの場所は「/app/assets/stylesheets/application.scss」です。

*= require_tree
*= require_self

そして、同ファイルにBootstrapをインポートする記述を追加します。

@import "bootstrap";

application.jsを編集する

application.js に次の3行を追加します。ファイルの場所は「/app/assets/javascripts/application.js」です。

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

これでBootstrapを使えるようになっています。

 

現場で使える Ruby on Rails 5速習実践ガイド
created by Rinker