Rails 7结合Importmaps引入Bootstrap 5.2.3 JavaScript失效求助

我不清楚自己哪里操作有误，已经查看了Stack Overflow上多数类似问题，但都无法解决我的问题。我尝试让Bootstrap 5.2.3的JavaScript生效以实现下拉菜单功能，选用了看起来最简单的Importmaps方式（此前尝试esbuild也未成功）。

Importmaps配置 #

（注：因了解到yarn上的版本存在Popper兼容问题，故通过jsdelivr引入Bootstrap）

pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/lib/index.js"

app/javascript/application.js 内容 #

import "@hotwired/turbo-rails"
import "controllers"
import "popper"
import "bootstrap"

app/views/layouts/application.html.erb 相关部分 #

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<% if Rails.env.development? %>
<%= javascript_include_tag "hotwire-livereload", defer: true %>

app/assets/config/manifest.js 内容 #

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js

生成的HTML头部相关内容 #

<link rel="stylesheet" href="/assets/application-340caa07ce1bbb3e424a11977f38b20d7ad5bcd57480d126430e8962eb772287.css" data-turbo-track="reload">
<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-43b3188fdbcd45d694dc59d1f446d56b6a7895097320f451e1f8b34080dfcd63.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js",
    "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.esm.js",
    "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/lib/index.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/current_link_controller": "/assets/controllers/current_link_controller-370b5b9f12a48b3c3c34f79e6d2782d26737770d0459437000dd110a50aead36.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
  }
}</script>
<link rel="modulepreload" href="/assets/application-43b3188fdbcd45d694dc59d1f446d56b6a7895097320f451e1f8b34080dfcd63.js">
<link rel="modulepreload" href="/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js">
<link rel="modulepreload" href="/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js">
<script src="/assets/es-module-shims.min-606ae9c3279013fe751cee30f719a592f759e705edb66496812f3d9dbce3d850.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
<script src="/assets/hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js" defer="defer"></script>

Gemfile 相关内容 #

# Use Sass to process CSS
gem 'bootstrap', '~> 5.2.3'
gem 'sassc-rails', '2.1.2'

额外疑问 #

另外我也不理解为什么Bootstrap和Popper似乎被打包进了application.css，而非通过<link rel....>标签引入。

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