注意事項
この記事は、単にうまくいった手法のみを紹介するのではなく、
筆者自身が詰まった状況を再現して、それを解決するにあたって行ったことについて書いています。
以上のことをご了承の上、本記事をご覧いただければ幸いです。
対象
- Railsチュートリアルを最後まで終えて、これから機能拡張を行おうと考えている方
環境
Railsチュートリアルの第14章終了時点と基本的には同じ
ruby (2.6.5)
rails (5.2.4.2)
bootstrap-saas (3.4.1)
bootstrap (4.4.1)
手順
1. bootstrap-saasを消す
1. 不要なgemをアンインストール
gem uninstall bootstrap-sass
2. Gemfileから削除
コメントアウトするか消しましょう
# gem "bootstrap-sass", ">= 3.4.1"
3. Gemfile.lockから削除
bundle update
参考
Qiita / @muran001 / 初心者は覚えておきたいRubygemsのコマンドまとめ
Qiita / @katoy / gem をクリーンにする。
2.bootstrapを導入する
1. Gemfileに追記
bootstrapのバージョンは記事投稿時の最新版を選択しています
また、jquery-railsも追記するように推奨している記事がありますが、Railsチュートリアルから何も触ってなければ、もともと導入されているのでここでは追記しません。
gem 'bootstrap', '~> 4.4.1'
2.Gemfileの更新を反映
どちらか選んで実行してください
Railsチュートリアルからの機能拡張をしているなら下を選んでください
bundle install
bundle install --without production
3. sprockets-railsのバージョンを確認
bundle show |fgrep sprockets-rails
4. application.scssを作成
＊作成と言っていますが、実際はapplication.cssをリネームしています。
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
5. bootstrapをimportさせる
もともと書いてあったものを、下のコードで置換する。
@import "bootstrap";
6. bootstrapと依存関係にあるものを追記
追記後のファイルはこちらになります。
// 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 rails-ujs
//= require jquery
//= require bootstrap
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .
参考
github / bootstrap-rubygem
Qiita / @NaokiIshimura / Railsアプリで Bootstrap 4 を利用する
詰まったことリスト
1. application.scssを読み込んでくれない
application.cssの拡張子を変更したため、プリコンパイルの対象から外れたため、読み込まれなくなった。
そこで、プリコンパイルの対象に拡張子がscssのファイルも対象になるように変更した。
Rails.application.config.assets.precompile += ['.js', '.scss']
2. custom.scssを読み込んでくれない
application.scssを確認すると、custom.scssをimportするようなコードを書いていないことに気づく。
@import "custom";
@import "bootstrap";
独自に作成したscssファイルを読み込ませたければ、
必ず、@import "bootstrap";の前に書くこと
参考
3. Undefined variable: "$gray-light".
代わりにrgbaを使用した。
/*変更前*/
$gray-light
/*変更後*/
rgba(#d3d3d3,1.0)
rgbaの書き方、およびカラーコードについて詳細に知りたい方は以下のリンクから確認してください。
参考
4. navbarがうまく反映されていない
Bootstrap4移行ガイドによると、Bootstrapのバージョンアップに伴ってNavbarの利用方法が変更されているため、bootstrap3では正常に適用されていたでも書き直す必要があることが分かった。
下記リンク先を参考に書き換えを行った。
参考
5. headerの上端に空白ができる
Chormeのデベロッパーツールを用いてheader上部の空白を調べた所、custom.scssのbodyが関係していることが分かった。
そこで、bodyのpadding-topの値を変更した。
body {
/*変更前*/
padding-top: 60px;
/*変更後*/
padding-top: 0px;
}