railsでbootstrapテンプレートを使う時に躓いた事 #JavaScript

作っているwebアプリのtopページをbootstrapテンプレートですれば楽という事なので導入する事に。
無料でレスポンシブ対応してるのもあります。

・課題
初めてbootstrapテンプレートを使う上で、色々つまずいていて、それらの解決。

まずは
railsでbootstrapのテンプレートを使用する方法
を参考にすすめていく。
+で
Rails5にbootstrapを導入する - write ahead log
を参考に。

ここでエラーが。

・問題1

Sass::SyntaxError in StaticPages#index

Showing 

/home/ubuntu/workspace/scout_me/app/views/layouts/application.html.erb where line #7 raised:

Invalid CSS after "...trap-sprockets"": expected "{", was ";"

/views/layouts/application.html.erbの７行目辺り　→

<head>
    <title>ScoutMe</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

assets/stylesheets/application.scssの16行目辺り　→　

// "bootstrap-sprockets" must be imported before"bootstrap"and"bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

・問題１の解決
*= require font-awesome　をassets/stylesheets/application.scssに書くという事でしたが
stackoverflow
を見ると、書いていない。ですので、コメントアウトしてみる。
更にbootstrapでは

が必要みたいなので

views/layouts/application.html.erb

 <body>
   <div class="container">
    <%= yield %>
   </div>
 </body>

のように付け加える。すると、エラー解決しました。

・問題２
画像やjavascriptが表示されない。

例えば、ダウンロードしてassets/javascriptに移動させたコードを見てみると

jQueryの部分にエラーが出ている。

・問題２の解決
stylesheet_link_tagにテンプレートのCSSも読み込むように,'magister'と追加した。Rails5は記述方法がRails4までとは違うみたい。

views/layouts/application.html.erb

<%= stylesheet_link_tag    'application','magister', media: 'all', 'data-turbolinks-track': 'reload' %>

しかし、まだエラーが起きる。config/initializers/assets.rb　にアセットパイプラインのコンパイル対象に追加しろとのこと。

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( magister.css )

とする事でエラーは取れ、bootstrapテンプレートを適用できました。
一度アセットパイプラインを体系的に学ぶ必要があるなと思いました。

とりあえず動いてるのでjQuery等のエラーは後回しにして先に進みたいと思います。

・補足
bootstrapテンプレートを導入する時に index.html　等があると思いますが、Railsなのでindex.html.erbと変更しました。