vendor/assets配下のstylesheetsとjavascriptsが認識されない
エラー内容
vendor/asssets/stylesheets配下にcssファイル、vendor/assets/javascripts配下にjsファイルを追加し、
それそれ以下のように読み込ませる指定をしたのですが、読み込んでくれないエラーに遭遇しました。
app/assets/stylesheets/application.css
*= require_tree .
*= require jquery.tagit
*= require tagit.ui-zendesk
*= require_self
*/
app/assets/javascripts/application.js
//= require jquery
//= require rails-ujs
//= require jquery-ui
//= require tag-it
//= require activestorage
//= require turbolinks
//= require_tree .
調査
ググってみると、パスが通っていない可能性が考えられるとのことで、以下のコマンドで確かめてみました。
すると、やはり、vendor/assets/stylesheetsとvendor/assets/javascriptsのパスは通っておりませんでした!!
irb(main):002:0> Rails.application.config.assets.paths
=> ["/Users/hayashiyoshino/projects/rails-projects/todo_management_app/app/assets/config", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/app/assets/images", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/app/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/app/assets/stylesheets", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/jquery-ui-rails-6.0.1/app/assets/images", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/jquery-ui-rails-6.0.1/app/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/jquery-ui-rails-6.0.1/app/assets/stylesheets", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/jquery-rails-4.3.3/vendor/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/heavens_door-0.1.5/app/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/heavens_door-0.1.5/app/assets/stylesheets", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/coffee-rails-4.2.2/lib/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/actioncable-5.2.2/lib/assets/compiled", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/activestorage-5.2.2/app/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/actionview-5.2.2/lib/assets/compiled", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/turbolinks-source-5.2.0/lib/assets/javascripts", #<Pathname:/Users/hayashiyoshino/projects/rails-projects/todo_management_app/node_modules>]
解決方法
パスを通すためには、config/initializers/assets.rbに以下のように指定すれば良いとのことでした。
Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "javascripts")
Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "stylesheets")
この状態でもう一度パスが通ったか確認してみると、きちんと通っておりました!!
irb(main):001:0> Rails.application.config.assets.paths
=> ["/Users/hayashiyoshino/projects/rails-projects/todo_management_app/app/assets/config", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/app/assets/images", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/app/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/app/assets/stylesheets", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/assets/stylesheets", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/jquery-ui-rails-6.0.1/app/assets/images", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/jquery-ui-rails-6.0.1/app/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/jquery-ui-rails-6.0.1/app/assets/stylesheets", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/jquery-rails-4.3.3/vendor/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/heavens_door-0.1.5/app/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/heavens_door-0.1.5/app/assets/stylesheets", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/coffee-rails-4.2.2/lib/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/actioncable-5.2.2/lib/assets/compiled", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/activestorage-5.2.2/app/assets/javascripts", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/actionview-5.2.2/lib/assets/compiled", "/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/bundle/ruby/2.6.0/gems/turbolinks-source-5.2.0/lib/assets/javascripts", #<Pathname:/Users/hayashiyoshino/projects/rails-projects/todo_management_app/node_modules>, #<Pathname:/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/assets/javascripts>, #<Pathname:/Users/hayashiyoshino/projects/rails-projects/todo_management_app/vendor/assets/stylesheets>]
以上の設定で、きちんとvendor/assets配下においたcssとjsが有効になってくれました!!