Bootstrapを導入したアプリケーションでCSSが反応しない場合の対策

本記事の目的

• bootstrapを導入したRailsのアプリケーションでCSSが適用されない現象を解決する

背景

RailsでのBootstrapの使い方を学んでいたが、Bootstrapのテンプレではない部分にCSSが反応しなくなった。
以下がコードとブラウザ上での見た目。
(Bootstrapの使い方を試しているだけなので、アクションやファイルの意図は特にない。)

index.html.erb

<%= render 'shared/header' %>
<p class="bg-primary"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

_header.html.erb

<header id="header-wrapper"></header>

header.scss

#header-wrapper {
  height: 50vh;
  background-color: blue;
}

application.scss

@import "bootstrap";
@import "tweets.scss";
// tweet.scssは何も記述がない
@import "header.scss";

Google chromeで表示↓

緑・青・黄・赤の線はBootstrapのテンプレで、一番上の太い赤の線は自分で用意したヘッダー。
(上に黒い線が見えるが、Google chromeのバーの部分)

1点おかしな箇所がある。
ヘッダー部分を、背景色blue、高さ50vhで指定したのに、背景色red、高さ5vhになってしまっている。
たしかに、最初は背景色red、高さ5vhで設定したが、背景色blue、高さ50vhに変更できるか試したところ、変わらなくなってしまった。

原因

SCSSファイルの読み込みの順番

上記コードの記述の通り、application.scssで、Bootstrapを一番初めに読み込んでいる。
Bootstrapでは、予めクラスやIDが用意されているので、競合したものがある場合、そちらが優先されるらしい。

よって、Bootstrapを読み込む前に、自分で用意したSCSSファイルを先に読み込んでみる。

application.scss

@import "tweets.scss";
// tweet.scssは何も記述がない
@import "header.scss";
@import "bootstrap";

以上の様に読み込む順番を修正し、Google chromeで表示してみると、、、↓

ヘッダー部分がしっかり指定した様に表示された。

結論

読み込む順番を変えれば、SCSSがしっかりと適用される。
(Bootstrapについては学習し始めたばかりの為、原因は他にもあるかもしれない。)