More than 3 years have passed since last update.

Bootstrapのnode_modulesファイル内のcssをoverride出来なかった話

Last updated at 2021-11-11Posted at 2021-11-11

表題の通り、Bootstrapでcssをoverrideしようとしたところ適用されず、沼にハマりかけたので記録を残します。

##実行環境

##問題
１． 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と拡張子を書き加えたところ今度はしっかりオーバーライドしてくれました。