繁体   English   中英

ActionController::RoutingError (没有路由匹配 [GET] “/vendor/assets/stylesheets/bootstrap.min.css”)

[英]ActionController::RoutingError (No route matches [GET] “/vendor/assets/stylesheets/bootstrap.min.css”)

我在 Rails 上做这个应用程序,页面加载正常,但在控制台中,出现:

Started GET "/vendor/assets/stylesheets/bootstrap.min.css" for ::1 at 2020-08-17 09:09:51 -0500

Started GET "/vendor/assets/javascripts/bootstrap.min.js" for ::1 at 2020-08-17 09:09:51 -0500
ActionController::RoutingError (No route matches [GET] 
"/vendor/assets/stylesheets/bootstrap.min.css"):
ActionController::RoutingError (No route matches [GET] 
"/vendor/assets/javascripts/bootstrap.min.js"):

在我的供应商文件夹中,我有两个文件夹,javascripts 和样式表,并且在它们各自的 bootsrtrap.min 中。 即使在 application.html.erb 我有以下内容:

 <link href="vendor/assets/stylesheets/bootstrap.min.css" rel="stylesheet"> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <.-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> <div class="container"> <a class="navbar-brand" href="#">Instagram Clone</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <.-- Page Content --> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <%= yield %> </div> </div> </div> <.-- Bootstrap core JavaScript --> <.--<script src="vendor/jquery/jquery.slim.min.js"></script>--> <script src="vendor/assets/javascripts/bootstrap.min.js"></script> </body> </html>

在两个应用程序文件 js 和 CSS 中,我都输入了“require bootsrtrap.min”,即使该错误仍然出现在我的控制台中。 会是什么呢?

RoR 不使用文件夹结构所指示的目录。 因为有一个资产加载器。 您应该在 application.css 中导入 css 和在 rails 5 或更低版本的 application.js 中的 js。 并使用自己的帮助程序添加捆绑文件:

1.用yarn安装bootstrap

yarn add bootstrap @popperjs/core jquery

或者

npm i bootstrap @popperjs/core jquery

导轨 5 或更少

2. 在 Assets Pipeline 中导入文件

应用程序/资产/样式表/application.css:

//...
require bootstrap/dist/css/bootstrap.min
//...

但如果你愿意,我建议使用 SCSS,只导入你需要的 styles。

应用程序/资产/javascript/application.js:

//...
//= require jquery
//= require @popperjs/core
//= require bootstrap/dist/js/bootstrap.min
//...

3.在布局中导入资产

应用程序/视图/布局/应用程序.html.erb:

<head>
...
  <%= stylesheet_link_tag 'application', media: 'all' %>
</head>
<body>
...
  <%= javascript_include_tag 'application' %>
</body>

带 webpack 的导轨 6

2.在application.scss和application.js中导入Bootstrap

应用程序/javascript/样式表/application.scss:

//...
import 'bootstrap'
//...

应用程序/javascript/packs/application.js:

import 'jquery'
import 'popper.js'
import 'bootstrap'
import '../stylesheets/application'

3.在Layout中导入bundle

<head>
...
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

之后,您应该可以在所有应用程序中使用引导程序!

[解决方案] 所以在我的 Html (application.html.erb) 里面我对 js 和 css 文件有两个调用:

 <script src="assets/javascripts/bootstrap.min.js"></script> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet"> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

正如您在上面看到的,在 javascript 的情况下,我有一个带有脚本的调用和其他带有 <%=%> 的调用,两者都有问题,所以你只需要评论一个,我在我的 java 文件和 CSS 文件的情况。 像这样:

 <.--<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet">--> <.--<script src="assets/javascripts/bootstrap.min.js"></script>-->

对我来说,这解决了问题,我真的尝试了一切,这就是解决方案哈哈。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM