はじめに
WEBサイトのデザインをどうするかと考えて、とりあえずBootstrapを入れてみようかなというかんじ。
環境
$ rails -v
Rails 6.0.0
参考にしたサイト
下記のgithubを参考にインストールしていきました。
twbs/bootstrap-rubygem
こちらはrails5の記事ですがRails6のことも載っているので参考になりました。
Railsアプリで Bootstrap 4 を利用する
Bootstrapを使えるようにするまで
viewファイル（任意）
確認用にBootstrap用のclassを使用したボタンを設置します。
app/view/static_pages/home.html.erb
<a href="#" class="btn btn-success">ボタン</a>
こんな感じになっています。
Gemfile
BootstrapとjQueryをインストールします。
Gemfile
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
terminal
$ bundle install
application.scss
新しいRailsアプリを作成した際には app/assets/stylesheets/application.css があるので、
こちらの名前を application.scss に変更します。
terminal
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
*= require と *= require_tree は使用できないので、
sassファイルから削除して内容を下記に変更します。
app/assets/stylesheet/application.scss
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
application.js
下記を追記します。
app/javascript/packs/application.js
//= require jquery3
//= require popper
//= require bootstrap
確認
Bootstrapっぽいボタンになりました。
終わりに
Bootstrapを入れてからが頑張りどころ。。