表題の通り、Bootstrapでcssをoverrideしようとしたところ適用されず、沼にハマりかけたので記録を残します。
実行環境
- Windows10 20H2
- Vagrant 2.2.18
- Ubuntu 20.04.3 LTS
- Ruby on Rails 6.0.4.1
- jQuery 3.5.1
- bootstrap 4.5.0
問題
１． HTMLファイル内にalertテスト用のdivを作成
<div class="alert alert-success">alertクラス</div>
２． オーバーライド用のscssファイルを作成。
[app/javascript/stylesheets/bootstrap_overrides.scss]
.alert-success {
background-color: pink;
}
３． scssファイルを読み込んでるマニフェストファイルにscssファイルのパスを通す。
[app/javascript/packs/application.js]
import '../stylesheets/bootstrap_overrides.scss';
これでbootstrap_overrides.scssの内容が適用されて、alert-successクラスがoverrideされるはずでしたが、反映されませんでした。
解決方法
マニフェストファイルに記載したscssファイルの拡張子を消す。
[app/javascript/packs/application.js]
import '../stylesheets/bootstrap_overrides';
ページをリロードするとalertクラスがoverrideされました。
余談
一度オーバーライドした後に"bootstrap_overrides.scss"の内容を変更し、
application.jsで.scssと拡張子を書き加えたところ今度はしっかりオーバーライドしてくれました。