Bootstrap 5.1 无法在 JSBundling Rails 7 中工作？

Question

2023-01-09 – 已解决

我开始使用默认的 Rails 模板，现在我想将 Bootstrap v5.1 与 Rails 一起使用。我已删除 Importmap-Rails 并继续添加 JSBundling-Rails 和 CSSBundling-Rails。样式工作正常，但 Bootstrap JavaScript 命令似乎都不起作用。我做错了什么？

转载自

rails new

rails new Xyz --css=bootstrap --javascript=esbuild && cd Xyz/ && ./bin/setup && git add . && git commit -m "initial commit"

rails generate controller Articles &&
echo "hello world" > app/views/articles/index.erb &&
sed -i '' -e  's/# root "articles#index"/root "articles#index"/g' config/routes.rb && 
git add . && git commit -m "generates Articles controller"

将默认引导导航添加到此文件： 2023-01-09 – 已解决----这是旧的 Bootstrap 4 标记，这就是为什么它对我不起作用

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-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="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

破坏和设置

rake assets:clobber && ./bin/setup && yarn install && bundle install

然后运行

./bin/dev

结果：（没有js交互工作）

预期结果：（JS交互有效）

Answer 1

我在让 Bootstrap 5.1.3 javascript 在 Rails 7.0.2.4 中工作时遇到了一些重大问题。工具提示和下拉菜单是断断续续的。

首先始终使用 bin/dev 来启动开发中的 Rails 服务器（而不是

rails server

命令）。

为了让 javascript 功能重新回到我的 Rails 7 应用程序中，我必须做的是进入

app/javascript/application.js

并更改它

import "@hotwired/turbo-rails"

到此

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

一切都开始按预期进行！

参考文献

• Turbo 文档提及它
• 这个问题也提到了
• 这个问题，以及这个和这个 PR。

---

您也可以尝试的事情

• 每次启动服务器之前，请使用以下命令清除所有内容：

rake assets:clean
rake assets:clobber
rake tmp:clear

每次页面加载时
• 硬刷新（ctrl + 单击刷新），或command + shift + r

Answer 2

从 Importmap 迁移到 JSBundling + CSSBundling 时，请确保删除残留文件。删除

config/importmap.rb

和

bin/importmap

。

还会有一些包含 Hotwire Turbo 和 Hotwire Stimulus 的残余物。如果您不打算使用它们，请删除

app/javascript/controllers

并清除

app/javascript/application.js

内部的线条。如果万一您需要 hotwire 库，请首先将 jsbundling-rails 和 cssbundling-rails 添加到 Gemfile 中。首先使用

rails javascript:install:[esbuild|rollup|webpack]

和

rails css:install:bootstrap

完成设置

bin/dev

可能存在一些冲突，但我没有注意到任何不同。因此，您可以丢弃或保留文件的冲突版本。

大多数必需的文件将自动生成，并且行会自动附加到预先存在的文件中，但如果 Bootstrap v5.1 仍然无法在使用 JSBundling 和 CSSBundling 的 Rails 中工作：

• 确保：

  import * as bootstrap from "bootstrap"
  

  已添加到

  app/javascript/application.js

  文件中。

• 查看

  app/assets/stylesheets

  是否有

  *.scss

  （可以是

  application.bootstrap.scss

  或

  application.scss

  ，只要

  package.json

  提供相同的名称就可以），里面的内容是：

  @import 'bootstrap/scss/bootstrap';
  @import 'bootstrap-icons/font/bootstrap-icons';
  

• 在

  app/assets/config/manifest.js

  文件中，确保包含构建目录：

  //= link_tree ../images
  //= link_tree ../../javascript .js
  //= link_tree ../../../vendor/javascript .js
  
  // Add the line below, with the double slashes and equal sign, followed by spaces.
  //= link_tree ../builds
  

• 不要忘记将资源包含在

  assets.rb

  文件中。下面的评论中提到了如何设置相同的内容。

Answer 3

确保您在 Bootstrap 5 中使用正确的标记。Bootstrap 4 标记将不起作用。 具体来说，查找下拉元素的数据属性更改为：

:data => { "bs-toggle" => "dropdown"}

Answer 4

就我而言是

import "@hotwired/turbo-rails"

导致了这个问题，所以我添加了 html 元素

data-turbo="false" 
ie
<li class="nav-item dropdown" data-turbo="false">

通过这个我的下拉菜单工作了，之前就崩溃了