http://localhost:3000/へアクセスするとWe're sorry, but something went wrong.と表示されてしまいます。

前提・実現したいこと

Mac OS
sqlite3
ruby 2.6.3
rails 5.2.4.1
gem 'devise'
gem 'rails-i18n', '> 5.1'
gem 'devise-i18n'
gem 'bootstrap', '> 4.4.1'
gem 'jquery-rails'
gem 'devise-bootstrap-views', '~> 1.0'

group :development do
gem 'pry-byebug'
end

ここに質問の内容を詳しく書いてください。
rails s を実行し、http://localhost:3000/へアクセスすると、

We're sorry, but something went wrong.
If you are the application owner check the logs for more information.

とエラーメッセージが出てきてしまいます。
昨日からずっとエラーに悩まされており、Bootstrapの導入方法が間違っていないかなどいろいろググってみましたが特に見当たりませんでした。
また、エラーメッセージ付近のファイルも確認しましたが、間違ってそうな箇所も見当たらずでした。
一体何が原因なのか分からず困っています。もしお分かりの方がいらっしゃればよろしくお願い致します。

発生している問題・エラーメッセージ

=> Booting Puma
=> Rails 5.2.4.1 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.2 (ruby 2.6.3-p62), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
Started GET "/" for ::1 at 2020-02-17 19:05:40 +0900
   (0.3ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
  ↳ /Library/Ruby/Gems/2.6.0/gems/activerecord-5.2.4.1/lib/active_record/log_subscriber.rb:98
Processing by GamesController#index as HTML
  Rendering games/index.html.erb within layouts/application
  Rendered games/index.html.erb within layouts/application (1.1ms)
Completed 500 Internal Server Error in 346ms (ActiveRecord: 0.0ms)


  
ActionView::Template::Error (Error: Invalid CSS after '...rt "bootstrap";': expected 1 selector or at-rule, was ""
        on line 1:21 of app/assets/stylesheets/application.scss
>> @import "bootstrap";

   --------------------^
):
     5:     <%= csrf_meta_tags %>
     6:     <%= csp_meta_tag %>
     7:     <meta name="viewport" content="width=device-width,initial-scale=1">
     8:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     9:     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    10:   </head>
    11: 
  
app/assets/stylesheets/application.scss:1
app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html_erb__1346811614260051292_70251170578240'

該当のソースコード

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ほにゃらら</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="base-container">
    <%= yield %>
    </div>
  </body>
</html>

assets/stylesheets/application.scss

@import "bootstrap";

$background-color: #272B2F;



body {
  background-color: $background-color;
  color: white;
}



.base-container {
  @extend .container-fluid;
  max-width: 576px;
  padding: 2rem;
}


.font {
  font-size: 1.3rem;
  @media screen and (max-width: 450px) {
    font-size: 1rem;
  }
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kazto

2020/02/17 11:52

コントローラのコードに変更はありませんでしょうか。

no1knows

2020/02/17 12:00

> ActionView::Template::Error (Error: Invalid CSS after '...rt "bootstrap";': expected 1 selector or at-rule, was "" on line 1:21 of app/assets/stylesheets/application.scss とエラーが記載されているので、念の為、該当ファイルをみてみたいですね。

popock

2020/02/17 12:10

コントローラーは一切触っていないですね・・・只今scssの中身を追記させて戴きました。引き続きエラー特定してみるとBootstrapの導入がうまくいってない気がします。 scssの中身がデフォルトのものであるとhttp://localhost:3000/にアクセスしても繋がりますが、追記内容のように変更するとWe're sorry, but something went wrong.文が出てしまいます。

no1knows

2020/02/17 12:31

このSCSSの@import "bootstrap";だけをのこして、ほかは全部削除したらエラーはどのようになりますか？

popock

2020/02/17 13:28

たった今解決しました！ @import "bootstrap";だけ残して消したものをもう一度記述していくと正常に表示されました。うまく読み込めてなかったのでしょうか。こういう解決方法もあるのですね。非常に勉強になりました。本当に助かりました。ありがとうございました。

no1knows

2020/02/17 13:51

直接的な回答になれずに申し訳ないです。とりあえずよくわからないときは、できるだけシンプルにすると切り分けがしやすいと思います。あと下記はあったほうが良いかもしれません。 Railsガイドみてもあんまり意味がわからなかったのですが、ブログに「この行がないと、このファイルに書かれたcssは無視されます。」と記載がありました。とはいえ、require_selfなくても、無視されずにきちんと読み込んだので・・・これなんでしょうね。 /* *= require_self */ なにはともあれ解決済みにしておいてください！

winterboum

2020/02/17 15:22

「@import "bootstrap";だけ残して消したものをもう一度記述していくと正常に表示されました」 typoがあったか、全角が紛れてたか、あたりの可能性もあります。もしエラーが起きていたversionがgitで残ってたら比較してみるとよいです

popock

2020/02/18 10:38

no1knowsさんとんでもございません。非常に助かりました。そちらの記述は通常必要みたいですね。気にしておきます。 winterboumさん今後同じようなエラーがでたら意識してみてみたいと思います。ご助言ありがとうございます。

行動規範の内容に同意します

回答1件

自己解決

エラーメッセージ内
ActionView::Template::Error (Error: Invalid CSS after '...rt "bootstrap";': expected 1 selector or at-rule, was ""
on line 1:21 of app/assets/stylesheets/application.scss

が原因であった。一旦コードを１行目以外削除してrails sすると表示された。もう１度削除したコードを貼り付けると何故かrails sで作動したので、scssの記述がうまく反映されていなかった可能性が高い。

また、今後も同じようなエラーが出たときにも、コードを1つ1つ切り分けて削除をうまく活用することでエラーの早期発見に繋がることを学んだ。

投稿2020/02/18 10:22

popock

総合スコア4