【Railsチュートリアル】bootstrapが読み込めない？【cssが原因かも】

僕はRailsチュートリアル第5章でつまずきました。

僕はRailsチュートリアルの指示通り、サンプルアプリケーションを開発するのにAWSのCloud9を使いました。

Railsチュートリアルの第5章の中で、custom.scssを作成してコードを書いていく場面があります。
custom.scssを保存してアプリケーションのプレビューを見てみると、↓の画像のようなエラーが出ました。

「bootstrapに問題があるのか」と思って色々調べてみました。

ググってみると「Railsサーバーを再起動すると改善する」といった情報が見つかります。
ですが、僕の場合改善しませんでした。

同じような状況になっている方もいらっしゃるのではないでしょうか。

試行錯誤した結果、改善することができました。
ご説明します。

cssが原因

結論からいうとcssが原因でした。

僕の開発環境では、.scssを保存すると.cssを自動生成する設定になってしまっていました。

つまり、custom.scssを編集して保存するとcustom.cssが自動生成される設定になっていました。
custom.cssが存在すると冒頭で示したようなエラーが出ます。

custom.cssを削除すればエラーが消えて、アプリケーションが上手く表示されます。

でも、custom.scssを編集して保存すれば、またcustom.cssが自動で生成されてしまいます。
いちいち自動生成されたcustom.cssを毎回削除するのは面倒です。

Cloud9の設定を変更する

Cloud9ではcustom.scssを編集したときにcustom.cssが自動生成されないように設定することができます。

下の画像のように、左上メニューの「Run」→「Automatically Build Supported Files」のチェックを外すだけです。

これで、custom.scssを編集して保存してもcustom.cssが自動生成されることはなくなります。

記事は以上です。