Rails 7中使用Importmap时Bootstrap下拉菜单失效且无法解析popper

1. 修复Popper导入报错 #

控制台出现的Unable to resolve specifier 'popper'错误，根源是你在application.js里导入了未在importmap.rb中pin的popper包。而且Bootstrap 5的ESM版本会自动依赖@popperjs/core，完全不需要手动导入@popperjs/core或popper。

修改app/javascript/application.js，删除多余的导入行：

import "@hotwired/turbo-rails"
import "controllers"
import "bootstrap"
import "@fortawesome/fontawesome-free"

2. 确保Bootstrap下拉菜单正常触发 #

先检查HTML结构是否符合Bootstrap 5规范：

• 触发按钮必须添加data-bs-toggle="dropdown"属性
• 下拉菜单容器要加上dropdown-menu类

示例正确结构：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">选项1</a></li>
    <li><a class="dropdown-item" href="#">选项2</a></li>
  </ul>
</div>

另外必须加载Bootstrap CSS：

• 方式1：在app/assets/stylesheets/application.bootstrap.scss中添加：

  @import "bootstrap";
  

• 方式2：在application.html.erb的<head>中插入CDN链接：

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
  

3. 修复Font Awesome不工作问题 #

仅导入JS无法正常显示图标，必须加载对应的CSS：

方法一：通过Importmap管理CSS #

在importmap.rb中添加：

pin "@fortawesome/fontawesome-free/css/all.css", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.0/css/all.css"

然后在application.js中导入该CSS：

import "@fortawesome/fontawesome-free/css/all.css"

方法二：直接插入CDN链接（更简便） #

在application.html.erb的<head>中添加：

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" rel="stylesheet">

注意使用正确的图标类名，比如Font Awesome 6的实心图标需用fa-solid前缀：

<i class="fa-solid fa-house"></i>

最后操作 #

修改完配置后，重启Rails服务器，清除浏览器缓存，再刷新页面测试功能。

内容的提问来源于stack exchange，提问作者Kamidesu