本記事の目的
- bootstrapを導入したRailsのアプリケーションでCSSが適用されない現象を解決する
背景
RailsでのBootstrapの使い方を学んでいたが、Bootstrapのテンプレではない部分にCSSが反応しなくなった。
以下がコードとブラウザ上での見た目。
(Bootstrapの使い方を試しているだけなので、アクションやファイルの意図は特にない。)
index.html.erb
<%=render'shared/header'%><pclass="bg-primary"><buttontype="button"class="close"aria-label="Close"><spanaria-hidden="true">×</span></button></p><pclass="bg-success">...</p><pclass="bg-info">...</p><pclass="bg-warning">...</p><pclass="bg-danger">...</p>_header.html.erb
<headerid="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については学習し始めたばかりの為、原因は他にもあるかもしれない。)