Rails6でBootstrap4を使ってみる

3519 ワード
jQuery Rails6 Sass bootstrap4 Sass テキストリンク

はじめに

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を入れてからが頑張りどころ。。