せっかくある程度のデザインができたのに、productionモードで動作確認するとCSSがバグって表示が崩れてしまいました。
BootStrapのCSSが反映されていませんでした。
解決するのにとても時間がかかったのでメモ。
TL;DR
- Productionモードでデザインが崩れた原因はBootStrapのCSSの
importの書き方 - DeveloperToolの確認は忘れずに(<- 当たり前だけどいつも忘れるw)
- これがRailsの黒魔術(?)
動作環境
動作環境は下記になります。
| version | |
|---|---|
| MacOS | Mojave |
| Ruby | 2.7.2 |
| Rails | 6.0.3.5 |
| MySQL | 5.7 |
| BootStrap | 4.5.3 |
本題
原因の特定
今回productionモードで動作させるために
- アプリをコンパイルする(rake assets:compile)
-
rails sでRailsを立ち上げる -
localhost:3000/(該当ページ)にアクセスする - DeveloperToolを開く → Consoleタブをクリック(これに気づくのにめっちゃ時間がかかりました)
という手順を踏みました。
1~3は、末尾にRAILS_ENV=productionをつけて実行しています。
すると下記の内容が表示されていていました。
画像が見にくいのでエラー内容を文字起こしすると下記のようになってます。
Failed to load resource: the server sesponded with a status of 404(Not Found) bootstrap.css:1
CSSが見当たらないよというエラーが発生しています。
このエラーが発生している原因の検討をつけます。
自分のアプリの場合はBootStrapをapp/assets/stylesheets/application.scssで読み込むように設定していました。
該当するファイルを開いてみると、下記の書き方をしていました。これが原因でした。
@import "bootstrap/dist/css/bootstrap.css";
@import "font-awesome-sprockets";
解決方法
これは書き方の問題ですが、単純に.cssという記述が必要ありません。
コードを下記のように修正します。
- @import "bootstrap/dist/css/bootstrap.css";
+ @import "bootstrap/dist/css/bootstrap";
修正した後下記手順を行い表示崩れが直っていればokです!!
- アプリを一度終了
- アプリをコンパイル(rake assets:precompile)
-
rails sでRailsを立ち上げる - 該当ページにアクセスする
なぜ上記のような記述になっていたのかは覚えがありませんが、書き方が.cssいるかいらないかわからないけど動いたから大丈夫でしょということだったと思います。
じゃあなぜ動いていたのか?
具体的にはわかりませんが、
developmentモードはこの微妙な間違いとかを解釈して動くようにしてくれるらしいです。
Rails恐るべし...
developmentモード恐るべし...
ちなみに
Railsのアップグレードを行ったのですが、Railsを5から6に上げたせいか全体的に動作がもっさりしてる…
どうにかならんかな...
知ってる人いたら教えてください!!