ActionController::RoutingError (No route matches [GET] “/vendor/assets/stylesheets/bootstrap.min.css”)
Question
I'm doing this app on Rails, the page loads fine but in the console, this appears:
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"):
Inside my vendor folder, I have both folders, javascripts and stylesheets, and in both their respective bootsrtrap.min. Even in the application.html.erb I have the following:
<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>In both application files, js and CSS, I have put the "require bootsrtrap.min" and even with that error still appearing in my console. What could it be?
2 answers
solution1
1 2020-08-17 15:08:12
RoR doesnt use the directory as the folder structure indicates. Because has a assets loader. You should import the css in application.css and the js in the application.js in rails 5 or less. And add the bundle file with its own helper:
1. Install bootstrap with yarn
yarn add bootstrap @popperjs/core jquery
or
npm i bootstrap @popperjs/core jquery
Rails 5 or less
2. Import files in Assets Pipeline
app/assets/stylesheets/application.css:
//...
require bootstrap/dist/css/bootstrap.min
//...
But if you want, I suggest to use the SCSS and only import the styles that you need.
app/assets/javascript/application.js:
//...
//= require jquery
//= require @popperjs/core
//= require bootstrap/dist/js/bootstrap.min
//...
3. Import Assets in Layout
app/views/layout/application.html.erb:
<head>
...
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
<body>
...
<%= javascript_include_tag 'application' %>
</body>
Rails 6 with webpack
2. Import Bootstrap in application.scss and 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. Import bundle in Layout
<head>
...
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
After that you should be able to use bootstrap in all your app!
solution2
0 ACCPTED 2020-08-17 22:41:31
[Solution] So inside my Html (application.html.erb) I had two calls for both js and css files:
<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' %>
As you can see above, in the case of the javascript, I have a call with script and other with <%=%>, having both was making the problem, so you just have to comment one, I comment the script one in the case of my java file and in the case of CSS file. Like this:
<.--<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet">--> <.--<script src="assets/javascripts/bootstrap.min.js"></script>-->And to me, that solves the problem, I tried really everything and this was the solution haha.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.