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 资产：clobber && ./bin/setup &&纱线安装&&捆绑安装

然后运行./bin/dev

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

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

Answer 1

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

首先始终使用 bin/dev 启动开发中的 Rails 服务器（而不是rails 服务器 命令）。

为了让 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 中工作：

• 请确保：

  从“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
  
  // 添加下面的行，其中包含双斜杠和等号，后跟空格。
  //= 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">

通过此添加了我的下拉菜单，该下拉菜单在早些时候崩溃了，

即使在设置“data-turbo”= false之后，我观察到的另一件事仍然存在，因为需要确保您到达 current_page 的链接的目标属性设置为 self ie

target="_self"