引导程序未正确加载？

Question

我刚刚创建了一个 Ruby 项目，我想在该项目上添加引导程序。 我使用 WebPacker 加载 CSS 和 JS 文件。

这是我的 application.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>

结果如下：

问题自然出在导航栏上，它应该格式正确并且是黑色的。 这是我的 application.js 应该在 /app/javascript/packs 上加载我的 site.scss (css) 和我的 site.js (js) ：

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()
})

这是我在 /app/javascript/scss 中的 site.scss 文件：

@import "~bootstrap/scss/bootstrap.scss";

这是网络加载文件的结果：

Answer 1

在您的application.css 或site.scss 中您可能需要添加：

@import 'bootstrap/scss/bootstrap';