【问题标题】：ActionController::RoutingError (No route matches [GET] "/vendor/assets/stylesheets/bootstrap.min.css")ActionController::RoutingError (没有路由匹配 [GET] "/vendor/assets/stylesheets/bootstrap.min.css")
【发布时间】：2020-08-17 14:28:58
【问题描述】：

我在 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”，即使该错误仍然出现在我的控制台中。会是什么？

【问题讨论】：

标签： javascript html css ruby-on-rails

【解决方案1】：

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

1。使用纱线安装引导程序

yarn add bootstrap @popperjs/core jquery

或

npm i bootstrap @popperjs/core jquery

Rails 5 或更少

2。在 Assets Pipeline 中导入文件

app/assets/stylesheets/application.css：

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

但如果你愿意，我建议使用 SCSS 并且只导入你需要的样式。

app/assets/javascript/application.js:

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

3。在布局中导入资产

app/views/layout/application.html.erb：

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

带有 webpack 的 Rails 6

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

app/javascript/stylesheets/application.scss：

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

app/javascript/packs/application.js:

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

3。在布局中导入包

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

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

【讨论】：

按照您的建议进行了所有操作，但没有奏效。我什至在 HTML (vendor/assets/javascripts/bootstrap.min) 中指定了路径，并且已经提出了要求，但仍然无法正常工作。
如果您不想使用 npm 或 yarn 安装引导程序，请将文件添加到 app/assets/javascript 中的 js 文件夹中，并将 css 文件添加到 app/assets/stylesheets 中。只需使用名称导入它。或者使用 CDN
感谢您的帮助！

【解决方案2】：

[解决方案] 所以在我的 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>-->

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

【讨论】：