如何使用Importmaps在Ruby on Rails 7中安装Bootstrap与jQuery？

前提 #

确保你的Rails 7项目已启用Importmaps（新建Rails 7项目默认自带，老项目升级需先运行 bin/rails importmap:install）

步骤1：添加依赖包 #

在项目根目录执行命令，将jQuery、Bootstrap及Bootstrap依赖的Popper.js导入Importmaps：

bin/importmap pin jquery @popperjs/core bootstrap

执行后，config/importmap.rb会自动生成对应CDN映射。

步骤2：配置JavaScript入口 #

打开 app/javascript/application.js，添加以下代码：

// 导入Popper.js（Bootstrap 5必需）
import "@popperjs/core"

// 导入jQuery并挂载到全局window，确保Bootstrap能识别
import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery

// 导入Bootstrap的JS与CSS
import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"

步骤3：检查布局资源引入 #

确认 app/views/layouts/application.html.erb 包含以下标签：

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>

Rails 7默认布局已自带这些标签，缺失则手动添加。

验证安装 #

在任意视图中添加Bootstrap组件测试，比如：

<button type="button" class="btn btn-primary">测试Bootstrap按钮</button>

启动服务器 bin/rails s，访问页面查看样式是否生效，同时可在浏览器控制台输入 $ 确认jQuery加载正常。

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