bootstrapが適用できない。

前提・実現したいこと

現在cloud9を使ってrailsチュートリアルの５章のsample＿appの作成をしておりましたがbootstrapが適用できない状態です。

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

Showing /home/ubuntu/environment/sample_app/app/views/layouts/application.html.erb where line #7 raised:
File to import not found or unreadable: bootstrap-sprockets. Load paths: /home/ubuntu/environment/sample_app/app/assets/config /home/ubuntu/environment/sample_app/app/assets/images /home/ubuntu/environment/sample_app/app/assets/stylesheets /home/ubuntu/.rvm/gems/ruby-2.6.3/gems/actioncable-6.0.0/app/assets/javascripts /home/ubuntu/.rvm/gems/ruby-2.6.3/gems/activestorage-6.0.0/app/assets/javascripts /home/ubuntu/.rvm/gems/ruby-2.6.3/gems/actionview-6.0.0/lib/assets/compiled /home/ubuntu/.rvm/gems/ruby-2.6.3/gems/turbolinks-source-5.2.0/lib/assets/javascripts /home/ubuntu/environment/sample_app/node_modules

該当のソースコード

ruby

試したこと

Gemfileの位置がsample_app直下であることを確認。
bundle install実施しUsing bootstrap-sass 3.4.1が入っていることを確認。
Cloud9を再起動
touch app/assets/stylesheets/custom.scssの作り直し
custom.scss中身を再度コピペ（@import "bootstrap-sprockets";
@import "bootstrap";）
railsサーバー立ち上げ直し
bundle update実行
Automatically Build Supported Filesにチェック無いことを確認。

上記わかる範囲で確認してみましたが解消にいたりませんでした。
アドバイスいただけると幸いです。

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

回答1件

ベストアンサー

/views/layouts/application.html.erb　の　7行目で
bootstrap-sprockets　をとり込もうとして見つからない
というエラーです。
0. /views/layouts/application.html.erb　を載せてください
0. bootstrap-sprockets.*はどこに置いてありますか。
0. 拡張子はなんですか　多分 js　だろうと思いますが

投稿2020/05/17 20:49

winterboum

総合スコア23347

pome00000

2020/05/18 00:34

お忙しい中アドバイスありがとうございます！１）/views/layouts/application.html.erb　が以下になります。 <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>  </head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <%= link_to "sample app", '#', id: "logo" %> <nav> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Log in", '#' %></li> </ul> </nav> </div> </header> <div class="container"> <%= yield %> </div> </body> </html> ２）otstrap-sprockets.*はapp/assets/stylesheets/custom.scssに記載しています。３）拡張子はどのファイルの拡張子をお伝えしたらいいでしょうか？初学者なものでお伺いばかりして申し訳ないです。

winterboum

2020/05/18 00:44

2) custom.scss は?長いですか？　otstrap-sprockets の辺りを見せてください

pome00000

2020/05/18 01:20

お返事ありがとうございます！！ custom.scssは以下のような内容が記載してあります⇩ import "bootstrap-sprockets"; @import "bootstrap"; /* universal */ body { padding-top: 60px; } section { overflow: auto; } textarea { resize: vertical; } .center { text-align: center; } .center h1 { margin-bottom: 10px; } /* typography */ h1, h2, h3, h4, h5, h6 { line-height: 1; } h1 { font-size: 3em; letter-spacing: -2px; margin-bottom: 30px; text-align: center; } h2 { font-size: 1.2em; letter-spacing: -1px; margin-bottom: 30px; text-align: center; font-weight: normal; color: #777; } p { font-size: 1.1em; line-height: 1.7em; } /* header */ #logo { float: left; margin-right: 10px; font-size: 1.7em; color: #fff; text-transform: uppercase; letter-spacing: -1px; padding-top: 9px; font-weight: bold; } #logo:hover { color: #fff; text-decoration: none; }

winterboum

2020/05/18 02:26

import "bootstrap-sprockets";　は "bootstrap-sprockets" を読み込むという指示ですが、このfileがないということだと思います。ありますか？

pome00000

2020/05/20 13:34

ご回答ありがとうございました。昨日再度c９起動すると解消していました。原因ははっきりしませんがとりあえずこれで進めて見ます。

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