Bootstrap4のCSSが適用されない時のチェック事項4つ

Bootstrapで楽をしようとしたら余計手間になってしまったので次回以降のためにメモ

1 環境
2 チェック事項一覧
3 まとめ

環境

Rails5
Bootstrap4

チェック事項一覧

１、stylesheet_linkタグを設定しているか

これが今回の私のミスでした。

application.html.erb

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

BareなどのBootstrapテンプレートをそのままhtmlに放り込むとこのコードが記載されていないためにBootstrapのCSSが反映されないようです。

このコードをapplication.html.erbなどBootstrapを導入するページに読み込ませることでBootstrap無事反映されました！

設置場所は<head>タグ内です。

２、Bootstrap導入手順が間違っている

Bootstrap導入手順で気をつけるべきポイントは4つあります。

２-1、ファイル名の変更

app/assets/stylesheets内の

application.css
↓
application.scss

に変更する必要があります。

２-2、デフォルト文の削除

application.js

*= require_tree .
*=require_self

はBootstrapの動きに影響を及ぼす可能性があるため削除する必要があります。

２-3、application.scssへの追記

Bootstrapを読み込むために

HTML

@import 'bootstrap';

を追記する必要があります。

２-4、application.jsの追記・編集

app/assets/javascript内の

application.jsを編集する必要があります。

//= require jquery
を
//= require jquery3
に変更

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

の追記

特筆すべき注意点はここら辺です。

ろっこ

詳しい導入方法はQiitaで解説してくれている方がいるのでそちらを参考にどうぞ。

参考 Railsアプリで Bootstrap 4 を利用するhttps://qiita.com

３、Railsサーバーの再起動

もしかしたら既に反映されるような状態であるのにサーバー側が前のままの変更以前の状態のままになっている時があるので、一度サーバーを落とし、Rails sでサーバーを再起動してみましょう:)

これで解決する問題も結構多いです

４、そもそもクラス指定が間違っている

男の子

一部のCSSは反映されているのにここだけ反映されないよ〜〜〜〜

って時は他のCSS手書きで書いているとどうしてもミスが起こることはあるかと思います。

この手の『一部のみ反映されない』ミスはサルワカさんの記事を参考にすれば解決するかと思います。

参考 CSSが効かない・反映されないときの対処法まとめhttps://saruwakakun.com

まとめ

でけた:)

クリックで拡大