Я только что создал проект Ruby, в который хотел добавить bootstrap. Я использую WebPacker для загрузки файлов CSS и JS.
Вот мое приложение. html макет .erb:
<!DOCTYPE html>
<html lang=fr>
<head>
<title>Blog</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Вот результат:
Problem is on the navbar naturally, it should be well formatted and in a black color.
Here is my application.js supposed to load my site.scss (css) and my site.js (js) on /app/javascript/packs :
require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import "bootstrap";
//CSS
import "../scss/site"
// JS
import "../js/site"
console.log("imported js")
document.addEventListener("turbolinks:load", () => {
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
})
Here is my site.scss file in /app/javascript/scss :
@import "~bootstrap/scss/bootstrap.scss";
Here is network loading files results:
введите описание изображения здесь