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が有効になってくれました!!