Railsでjavascript・CSSを使う方法を紹介!

JavaScript
この記事は約3分で読めます。

みなさんこんにちは!イザナギです。

今回もRailsで開発しているときに詰まった点をメモとしてブログに残していきたいと思います。

自分はRuby on RailsでWebアプリケーションを製作していますが、アニメーションをつけたくてJavaScript・SCSS(CSS)を利用しようかなと考えていました。

Viewとともに作成していたJavaScript・SCSS(CSS)は、問題なく使えたのですがそれ以外のJavaScript・SCSS(CSS)(waypoints.min.js Animate.css)などネット上から持ってきたファイルなどを読み込もうとするとエラーが出てしましました。

こんな時の対処法を調べていきたいと思います!

ちなみにそれぞれのバージョンは

  • ruby 2.4.1p111
  • Rails 5.0.7.2

まずはスタイルシートを読み込む

読み込みたいJavaScript・SCSS(CSS)ファイルをそれぞれヘッダーに以下のように追加します。

<%= javascript_include_tag 'ファイル名' %>
<%= stylesheet_link_tag 'ファイル名' %>

実行するとエラー発生する

ここまではよかったのですが、このように記述しただけでは以下のようなエラーが出てくると思います。

Asset was not declared to be precompiled in production. Add `Rails.application.config.assets.precompile += %w( ファイル名 )` to `config/initializers/assets.rb` and restart your server

これは、assets.rbに「Rails.application.config.assets.precompile += %w( ファイル名 )」と記載した後でサーバーを再起動してくださいねと言っています。

ですので、config/initializers/assets.rbを開き「Rails.application.config.assets.precompile += %w( ファイル名 )」を記載して、サーバーを再起動してみてください。

これで、JavaScript・SCSS(CSS)が適用できていると思います!

また、application.jsにおいて

//= require_tree .

application.cssにおいて

*= require_tree .

を利用していなかったり、コメントを外したりするとエラーを起こしたりすると、うまく適用されなかったりします。

まとめ

今回はエラーメッセージに書かなきゃいけないことが書いてあったので、簡単に解決することができました。

また、エラーを発見したら記事に残していきたいと思います。

それでは今回はここで筆を置かせていただきます。

最後までご覧いただきありがとうございました!

コメント

タイトルとURLをコピーしました