我在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"):
在我的供应商文件夹中,我有两个文件夹,javascript和样式表,并且在它们各自的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这两个应用程序文件中;requirebootsrtrap.min";即使这个错误仍然出现在我的控制台中。可能是什么?
RoR不使用文件夹结构所指示的目录。因为有一个资产加载器。您应该在application.css中导入css,在rails 5或更低版本中导入application.js中的js。并使用自己的助手添加捆绑文件:
1.用纱线安装引导器
yarn add bootstrap @popperjs/core jquery
或
npm i bootstrap @popperjs/core jquery
轨道5或更少
2.导入资产管道中的文件
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中导入引导程序
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>
之后,你应该能够在所有的应用程序中使用引导程序!
[Solution]所以在我的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的情况下,我有一个与script的调用,而另一个与<%=%的调用>,两者都造成了问题,所以你只需要评论一个,我在java文件和CSS文件的情况下评论脚本一个。像这样:
<!--<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet">-->
<!--<script src="assets/javascripts/bootstrap.min.js"></script>-->
对我来说,这解决了问题,我真的尝试了一切,这就是解决方案,哈哈。