Rails7集成Bootstrap遇ActionController::RoutingError问题求助

问题根源 #

这个错误是因为CSS文件中的@import "bootstrap"未被正确预编译，浏览器将其当作相对路径请求，试图访问/bootstrap这个Rails未定义的路由。同时项目存在资产配置冲突：混用了Sprockets的require语法、cssbundling-rails的编译流程，还有重复的SCSS入口文件，导致资产处理逻辑混乱。

分步修复 #

1. 清理重复的SCSS文件 #

保留app/assets/stylesheets/application.bootstrap.scss作为唯一CSS入口，删除app/assets/stylesheets/application.scss和app/assets/builds/application.css（后者会由cssbundling自动生成）。

修改app/assets/stylesheets/application.bootstrap.scss：

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

2. 修正Sprockets配置 #

编辑app/assets/config/manifest.js，移除多余链接，确保只包含必要资产：

//= link_tree ../images
//= link_tree ../builds

（application.js和application.css会通过link_tree ../builds自动包含，无需单独声明）

3. 调整JavaScript引入，避免重复 #

布局文件同时通过importmap和CDN引入Bootstrap JS，会导致冲突，推荐保留importmap方式：

• 删除app/views/layouts/application.html.erb底部的CDN脚本标签：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

• 确保app/javascript/application.js中的Bootstrap导入正确：

import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import Rails from "@rails/ujs"
Rails.start()

// 可选：将Bootstrap挂载到window对象，方便全局调用
window.bootstrap = bootstrap

4. 安装缺失的依赖包 #

package.json中缺少Bootstrap及相关编译依赖，执行命令安装：

yarn add bootstrap bootstrap-icons autoprefixer postcss nodemon

5. 重新构建资产 #

执行cssbundling和jsbundling的构建命令：

yarn build:css
yarn build

6. 重启Rails服务器 #

关闭原有服务器进程后重新启动：

rails s

验证修复 #

访问应用，检查浏览器控制台是否还有路由错误，同时测试Bootstrap组件（如导航栏下拉菜单）是否正常工作。

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