Rails、SassのSyntaxerrorにて、Bootstrapがimport出来ません…

前提・実現したいこと

Railsのサンプルアプリを開発するうえで、以下のようなエラーが出てきます。

rails serverを起動しなおす前は、タイトルのような、File to import not found or unreadable; bootstrap
のようなエラーが出てきていたのですが、立ち上げると、下に載せたような新たなエラーがbetter_errorsに
出てきました。

しかし、問題となっている場所は、以下のログ内に記載のある、app/views/layouts/application.html.erb:7:in
にある、<%= stylesheet_link_tag 'application', media: 'all' %>というところにあるようです。
（赤いハイライトがされていた）

このエラーは、app/assets/stylesheets/application.scss,app/assets/stylesheets/application.jsにそれぞれ以下のコードを書いているときに発生しています。

何か思い当たる点がある方、解決法を知っている方いらしたらお力添えいただけると助かります…！
#####思い当たる点

@import "bootstrap";をCtrl+clickすると、以下のようなVSCodeのエラーが出る。

'_bootstrap.scss' を開くことができません: ファイルが見つかりません (file:///c:/Users/ryota/environment/RailsSampleApp/app/assets/stylesheets/_bootstrap.scss)。

書籍には以下に示したようにコメントアウトされていたが、

//= require bootstrap
これは本当に正しいのか？

そもそも、

= require rails-ujs
と書きたいのに、VSCodeが勝手に、コードを微妙に訂正してきて、問題の提示をしてくる。

[ts] ';' が必要です。 [1005] any
このようなエラーが出てくるので、恐らくTypescriptと認識されている…？

VSCodeについて、よく、JShint/ESlint(?)をインストールできませんでした。と表示が出る。

これ自体解決法が分からず、放置してしまっている。

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

rails server(puma)のサーバログ

Started GET "/" for 127.0.0.1 at 2019-01-25 15:43:24 +0900
Processing by HomeController#index as HTML
  Rendering home/index.html.erb within layouts/application
  Rendered home/index.html.erb within layouts/application (4.8ms)
Started GET "/" for 127.0.0.1 at 2019-01-25 15:43:30 +0900
Processing by HomeController#index as HTML
  Rendering home/index.html.erb within layouts/application
  Rendered home/index.html.erb within layouts/application (0.7ms)
Completed 500 Internal Server Error in 6447ms



RuntimeError - ExecJS::RubyRacerRuntime is not supported. Please replace therubyracer with mini_racer in your Gemfile or use Node.js as ExecJS runtime.:
  app/views/layouts/application.html.erb:7:in `_app_views_layouts_application_html_erb__3828119162137650962_70368279712600'

Completed 500 Internal Server Error in 2879ms

該当のソースコード

app/views/layouts/application.html.erb

ERB
1<!DOCTYPE html>
2<html>
3  <head>
4    <title><%= page_title %></title>
5    <%= csrf_meta_tags %>
6
7    <%= stylesheet_link_tag    'application', media: 'all' %>
8    <%= javascript_include_tag 'application' %>
9  </head>
10
11  <body>
12    <%= render "layouts/header" %>
13    <div class="container py-4">
14      <%= yield %>
15    </div>
16  </body>
17</html>

app/assets/stylesheets/application.scss

@import "bootstrap";

app/assets/stylesheets/application.js

= require rails - ujs
//= require turbolinks
//= require tether
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

試したこと

ここに問題に対して試したことを記載してください。

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

一時的に書籍の該当箇所載せてみます。
いいかわからないので駄目だったらすぐ消してください。

ただ、HPの正誤表見てもなかったんですよねそこ。正誤表の表記すら間違ってた部分あった気がするので
怪しいですけど。

追記　逆でした。

再追記

書籍に合ったGemfile

maisumakun

2019/01/25 07:48

Bootstrapはどのような方法で導入していますか？（ファイル直置き、Gem、CDNなど）

kyotoinrn

2019/01/25 08:11

Gemfileに、 `gem 'bootstrap', '> 4.0.0.beta2.1'` のような形で記載しています。

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

回答1件

ベストアンサー

=require rails-ujsについては、//= require rails-ujsと、コメントとして書いてください（コメントに見えますが、きちんと動作します）。

投稿2019/01/25 07:33

maisumakun

総合スコア145183

maisumakun

2019/01/25 07:49

「//= require bootstrap」も、（BootstrapをGem経由で入れるなら）コメント表記で正解です。

kyotoinrn

2019/01/25 08:11

`=require rails-ujs` については、このように修正するように記載があったのです。「//= require bootstrap」については知りませんでした、ありがとうございます。

maisumakun

2019/01/25 08:18 編集

> このように修正するように記載があったのです。どこにありましたか？（VSCodeからの指摘は「JavaScriptの文法としての修正」ということなので、コメントにすれば指摘自体が行われなくなります）

kyotoinrn

2019/01/25 08:18

VSCodeについての補足です。 `jshint`という拡張機能については、再読み込みなどの動作をしたときは、このようなエラーが出てきます。 Failed to load jshint library. Please install jshint in your workspace folder using 'npm install jshint' or globally using 'npm install -g jshint' and then press Retry. しかし、前回にエラー文のコマンドを試してみても変わらなかったんですよね。なにか間違えているのか…

maisumakun

2019/01/25 08:19

jshintの件は、Railsが正しく動作するようになるまでひとまず後回しにしたほうがいいでしょう（あくまでチェックツールなので、なくても動作させることは可能です）。

kyotoinrn

2019/01/25 08:20

書籍にですね。誤植の多い本なのでもしかしたらその可能性もあると思うんですが、書き方からして普通間違えないと思うんですよね…

kyotoinrn

2019/01/25 08:21

jshintの件了解しました。前後してすみません

maisumakun

2019/01/25 08:25

Rails公式にも「//= require rails-ujs」と明記されています。本のほうが間違いです。 https://github.com/rails/rails/tree/master/actionview/app/assets/javascripts

kyotoinrn

2019/01/25 08:28 編集

分かりました。ありがとうございます…！しかし画像載せたのですが、わざわざこんなミスするのかって感じです… とりあえず言われたとおりにやってみます

kyotoinrn

2019/01/25 08:53 編集

↑ダメでした、全く同じエラーが出現しました `<%= stylesheet_link_tag 'application', media: 'all' %>`やはりここが依然問題のようです。。

kyotoinrn

2019/01/25 09:50 編集

Gemfileには、 gem 'therubyracer', platforms: :ruby, github: 'cowboyd/therubyracer' とあります。これを書いた時点で問題はなかったので、やはりasset周りに問題があると思うのですが…

maisumakun

2019/01/25 09:02

サーバの再起動などを行っても同じ状況が続きますか？

kyotoinrn

2019/01/25 09:51

そのようです。

kyotoinrn

2019/01/25 10:04

一つ書籍の誤植絡みについて思い当たるのは、書籍には上の画像の様に書かれていたんですよね（見たことない記号、マクロン？）上手くいかなかったので消して先に進みました。関係なければすみません。

kyotoinrn

2019/01/25 10:57

https://note.mu/konpyu/n/na213a14ad1e3 こんなような記事を日英両方で見かけましたが、単にこの書籍がdeprecatedだった、とあきらめるしかないのでしょうか…？

kyotoinrn

2019/01/25 11:44 編集

gem 'mini_racer' と代わりにインストールしてみたのですが、また別のエラーが出てきています。 Started GET "/" for 127.0.0.1 at 2019-01-25 20:00:18 +0900 Processing by HomeController#index as HTML Rendering home/index.html.erb within layouts/application Rendered home/index.html.erb within layouts/application (5.2ms) Completed 500 Internal Server Error in 7326ms ActionView::MissingTemplate - Missing partial layouts/_header with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby]}. Searched in: * "/mnt/c/Users/ryota/environment/RailsSampleApp/app/views" : app/views/layouts/application.html.erb:12:in `_app_views_layouts_application_html_erb___3531800178492581642_70368615506380' Started POST "/__better_errors/004a2ee374ba60ac/variables" for 127.0.0.1 at 2019-01-25 20:00:25 +0900 他の条件は満たしていると思うので、 with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby]}. ココだと思うのですが、どうすればいいのでしょうか…

kyotoinrn

2019/01/25 12:28

解決しました！ _header.html.erbを、_header_html.erbとしていたようです。

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