Q&A前提・実現したいこと
Railsアプリにmaterial-dashboardを導入したいと考えております。
（以前も導入していたのですが今回PRO版を購入したため改めてセットアップしています
導入段階にてcss,jsのエラーが発生しており左記が反映されない状況です。
githubや公式ページを見ながら導入しておりますがうまく反映がされないのでおわかりの方ご教授いただけますと幸いです。
発生している問題・エラーメッセージ
このようにcssやjsが反映されないエラーがおきています
下記はデモ画面ではありますがこのようなダッシュボード風のレイアウトのようにしたいです
エラーメッセージが長すぎるので一部のみ添付致します。
おそらくassets配下のcss,js全てに下記のようなエラーが発生しております
ActionController::RoutingError (No route matches [GET] "/assets/js/plugins/jasny-bootstrap.min.js"): vendor/bundle/ruby/2.5.0/gems/actionpack-5.2.4.4/lib/action_dispatch/middleware/debug_exceptions.rb:65:in `call' vendor/bundle/ruby/2.5.0/gems/web-console-3.7.0/lib/web_console/middleware.rb:135:in `call_app' vendor/bundle/ruby/2.5.0/gems/web-console-3.7.0/lib/web_console/middleware.rb:22:in `block in call' vendor/bundle/ruby/2.5.0/gems/web-console-3.7.0/lib/web_console/middleware.rb:20:in `catch' vendor/bundle/ruby/2.5.0/gems/web-console-3.7.0/lib/web_console/middleware.rb:20:in `call' vendor/bundle/ruby/2.5.0/gems/actionpack-5.2.4.4/lib/action_dispatch/middleware/show_exceptions.rb:33:in `call' vendor/bundle/ruby/2.5.0/gems/railties-5.2.4.4/lib/rails/rack/logger.rb:38:in `call_app' vendor/bundle/ruby/2.5.0/gems/railties-5.2.4.4/lib/rails/rack/logger.rb:26:in `block in call' vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.4.4/lib/active_support/tagged_logging.rb:71:in `block in tagged' vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.4.4/lib/active_support/tagged_logging.rb:28:in `tagged' vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.4.4/lib/active_support/tagged_logging.rb:71:in `tagged' vendor/bundle/ruby/2.5.0/gems/railties-5.2.4.4/lib/rails/rack/logger.rb:26:in `call' vendor/bundle/ruby/2.5.0/gems/sprockets-rails-3.2.2/lib/sprockets/rails/quiet_assets.rb:11:in `block in call' vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.4.4/lib/active_support/logger_silence.rb:21:in `silence' vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.4.4/lib/active_support/logger.rb:65:in `block (3 levels) in broadcast' vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.4.4/lib/active_support/logger_silence.rb:21:in `silence' vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.4.4/lib/active_support/logger.rb:63:in `block (2 levels) in broadcast' vendor/bundle/ruby/2.5.0/gems/sprockets-rails-3.2.2/lib/sprockets/rails/quiet_assets.rb:11:in `call' vendor/bundle/ruby/2.5.0/gems/actionpack-5.2.4.4/lib/action_dispatch/middleware/remote_ip.rb:81:in `call' vendor/bundle/ruby/2.5.0/gems/actionpack-5.2.4.4/lib/action_dispatch/middleware/request_id.rb:27:in `call' vendor/bundle/ruby/2.5.0/gems/rack-2.2.3/lib/rack/method_override.rb:24:in `call' vendor/bundle/ruby/2.5.0/gems/rack-2.2.3/lib/rack/runtime.rb:22:in `call' vendor/bundle/ruby/2.5.0/gems/activesupport-5.2.4.4/lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call' vendor/bundle/ruby/2.5.0/gems/actionpack-5.2.4.4/lib/action_dispatch/middleware/executor.rb:14:in `call' vendor/bundle/ruby/2.5.0/gems/actionpack-5.2.4.4/lib/action_dispatch/middleware/static.rb:127:in `call' vendor/bundle/ruby/2.5.0/gems/rack-2.2.3/lib/rack/sendfile.rb:110:in `call' vendor/bundle/ruby/2.5.0/gems/railties-5.2.4.4/lib/rails/engine.rb:524:in `call' vendor/bundle/ruby/2.5.0/gems/puma-3.12.6/lib/puma/configuration.rb:227:in `call' vendor/bundle/ruby/2.5.0/gems/puma-3.12.6/lib/puma/server.rb:706:in `handle_request' vendor/bundle/ruby/2.5.0/gems/puma-3.12.6/lib/puma/server.rb:476:in `process_client' vendor/bundle/ruby/2.5.0/gems/puma-3.12.6/lib/puma/server.rb:334:in `block in run' vendor/bundle/ruby/2.5.0/gems/puma-3.12.6/lib/puma/thread_pool.rb:135:in `block in spawn_thread'
該当のソースコード
application.html.erb
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Toreka</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 <script type="text/javascript" src="https://js.pay.jp/v1/"></script> 8 <%= stylesheet_link_tag 'application', media: 'all' %> 9 <%= javascript_include_tag 'application' %> 10 <!--レスポンシブ対応--> 11 <meta name="viewport" content="width=device-width, initial-scale=1"> 12 13 <!--Required meta tags --> 14 <meta charset="utf-8"> 15 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 16 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 17 18 <!-- Fonts and icons --> 19 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" /> 20 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> 21 <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> 22 23 <!-- Material Dashboard CSS --> 24 <link rel="stylesheet" href="assets/css/material-dashboard.css"> 25 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 26 27 </head> 28 29 <body> 30 31 <!--body の中身はエラーとは無関係なので割愛--> 32 33 34 <!-- Core JS Files --> 35 <script src="assets/js/core/jquery.min.js" type="text/javascript"></script> 36 <script src="assets/js/core/popper.min.js" type="text/javascript"></script> 37 <script src="assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script> 38 39 <!-- Plugin for the Perfect Scrollbar --> 40 <script src="assets/js/plugins/perfect-scrollbar.jquery.min.js"></script> 41 42 <!-- Plugin for the momentJs --> 43 <script src="assets/js/plugins/moment.min.js"></script> 44 45 <!-- Plugin for Sweet Alert --> 46 <script src="assets/js/plugins/sweetalert2.js"></script> 47 48 <!-- Forms Validations Plugin --> 49 <script src="assets/js/plugins/jquery.validate.min.js"></script> 50 51 <!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard --> 52 <script src="assets/js/plugins/jquery.bootstrap-wizard.js"></script> 53 54 <!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select --> 55 <script src="assets/js/plugins/bootstrap-selectpicker.js" ></script> 56 57 <!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ --> 58 <script src="assets/js/plugins/bootstrap-datetimepicker.min.js"></script> 59 60 <!-- DataTables.net Plugin, full documentation here: https://datatables.net/ --> 61 <script src="assets/js/plugins/jquery.datatables.min.js"></script> 62 63 <!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs --> 64 <script src="assets/js/plugins/bootstrap-tagsinput.js"></script> 65 66 <!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput --> 67 <script src="assets/js/plugins/jasny-bootstrap.min.js"></script> 68 69 <!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar --> 70 <script src="assets/js/plugins/fullcalendar.min.js"></script> 71 72 <!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ --> 73 <script src="assets/js/plugins/jquery-jvectormap.js"></script> 74 75 <!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ --> 76 <script src="assets/js/plugins/nouislider.min.js" ></script> 77 78 <!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert --> 79 <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script> 80 81 <!-- Library for adding dinamically elements --> 82 <script src="assets/js/plugins/arrive.min.js"></script> 83 84 <!-- Google Maps Plugin --> 85 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script> 86 87 <!-- Chartist JS --> 88 <script src="assets/js/plugins/chartist.min.js"></script> 89 90 <!-- Notifications Plugin --> 91 <script src="assets/js/plugins/bootstrap-notify.js"></script> 92 93 <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc --> 94 <script src="assets/js/material-dashboard.min.js?v=2.1.1" type="text/javascript"></script> 95 96 </body> 97</html> 98
試したこと
公式ページを確認したところassets配下に必要なcssファイル、jsファイルを配置するとのことだったので下記のように配置しました。
もともと下記のような形でダウンロードをしておりそこから、assetsディレクトリ配下に[css,img,js,scss]というフォルダを移動させました。
補足情報（FW/ツールのバージョンなど）
ec2-user:~/environment/toreka (master) $ rails -v
Rails 5.2.4.4
ec2-user:~/environment/toreka (master) $ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
恐れ入りますがご教示いただけますと幸いです。
宜しくお願い致します。
回答1件
0
自己解決
本質的かはわかりませんが下記のように配置したところ解決しました。
assets Ljavascript Ljs Lstylesheets Lcss Limages Limg Lscss
投稿2020/12/10 04:23
総合スコア49
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。