More than 1 year has passed since last update.

Rails開発環境でBootstrapが効かなくなってしまった時にしたこと

Last updated at 2022-07-06Posted at 2022-07-06

Railsの開発環境でassets:precompileは通常不要だが、やってしまったときにBootstrapがブラウザに反映されなくなり、しばらくはまってしまったのでその時にやったことを備忘録で記載します。

環境

macOS Big Sur(11.6.6)
rails 6.1.6
Bootstrap 4.5.3

警告
Bootstrapの導入にはWebpackerで入れる場合とassetsに入れる場合とがありますが、前者でやっています。
https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a

開発環境でassets:precompileをしたことにより、public/assetsが生成されてしまい、そちらを見に行ってしまうようになり、以降のcssの変更なども反映されない。Bootstrapも読み込んでいない。

assets:precompileによってできてしまったファイルを削除する。

念のため、
https://interfirm.hatenablog.com/entry/2014/10/24/131503
を参考に、以下（上から３つ）を実行してからファイル削除を行なった。

順番に見ていきたいと思います。

ターミナル

$ bundle exec rails assets:clean

Docker環境であれば、appなりwebのコンテナに入ってからbundle exec rails assets:clean実行します。

ターミナル

$ docker exec -it (appやwebの名前) bash

アプリ直下にtmpフォルダがありますが、そのフォルダ内のassetsごと削除します。

config/environments/development.rb

config.assets.debug = true

となっていれば、falseに変更。
こちらはBootstrap読み込みが成功すれば元に戻して大丈夫です。

assets:precompileで生成されてしまったファイルを削除します。

public内にassetsフォルダがあるとそのフォルダ内を自動的に読みにいってしまうのでassetsごと丸ごと削除します。

また、app/assets/stylesheets内にもともとあった.scssファイルを元に.css、.css.mapが作成されていると思います（たとえば本番環境ではassets:precompileした後には作成されています）。

たとえば私のアプリ内は以下のようになっていました。

app/assets/stylesheets

application.css
evaluations.css
evaluations.css.map
evaluations.scss
home.css
home.css.map
home.scss
users.css
users.css.map
users.scss

assets:precompile前は以下でした。

app/assets/stylesheets

application.css
evaluations.scss
home.scss
users.scss

なので、余計なファイルを削除して、assets:precompile前の状態にします。

警告
application.cssは削除しないでください。

Dockerであればdocker-compose buildし、docker-compose upしてブラウザを確認し直してください。

これでもBootstrapが反映しない場合、キャッシュの可能性もあるので、ブラウザキャッシュをクリアしてためしてみてください。

※５つの手順を踏みましたが、最初の３つを実行しなくてもBootstrapが反映され、cssの変更がふたたび自動で反映される可能性もあると思います。