如何将大型Rails 6/7应用从Zurb Foundation迁移到Bootstrap 5？

针对你要将150个页面从Foundation迁移到Bootstrap 5，同时解决row类冲突的需求，以下是比实例变量切换更优的迁移方案：

一、用Rails布局系统替代实例变量切换 #

手动给每个页面设置@use_bootstrap_js_and_css容易遗漏且不符合Rails约定，推荐用布局分离+路由/控制器指定布局的方式：

1. 创建独立的Bootstrap布局文件app/views/layouts/bootstrap.html.haml，专门加载Bootstrap资源：

!!! 5
%html(lang="en-US")
  %head
    %title HostelFunTimes | Free Hostel Booking Software
    %meta(charset="UTF-8")
    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
    %meta{:name => 'description', :content => "HostelFunTimes is a free website for booking cheap hostels."}
    %link{rel:"shortcut icon", href:"/favicon.ico"}
    = csrf_meta_tag
    # Bootstrap 5资源（Rails7推荐用importmap替代CDN）
    = stylesheet_link_tag "bootstrap", media: "all"
    = javascript_importmap_tags
  %body
    = yield

2. 保留原有的application.html.haml作为Foundation布局，然后在控制器或路由中指定页面使用的布局：

• 控制器级别指定（适合整组页面迁移）：

# 某个控制器下的所有页面都用Bootstrap布局
class CheckoutController < ApplicationController
  layout 'bootstrap'
end

# 仅指定部分动作使用Bootstrap布局
class UsersController < ApplicationController
  layout 'bootstrap', only: [:new, :edit]
end

• 路由级别指定（适合单个页面迁移）：

get '/booking/confirmation', to: 'booking#confirmation', layout: 'bootstrap'

这种方式无需在页面模板中添加变量，完全遵循Rails的MVC结构，维护成本更低。

二、CSS类冲突隔离方案（可同时加载双框架） #

如果需要在过渡期同时加载Foundation和Bootstrap，避免row等类冲突，可以给Bootstrap添加命名空间前缀：

1. 下载Bootstrap 5的源码，通过修改变量或使用PostCSS插件（如postcss-prefix-selector），给所有Bootstrap选择器添加根类前缀，例如：

/* 处理后Bootstrap的.row会变成 */
.bootstrap-page .row {
  /* 原Bootstrap样式 */
}

2. 在Bootstrap布局的<body>标签上添加该类：

%body.bootstrap-page
  = yield

这样，只有带.bootstrap-page的页面会应用Bootstrap的样式，Foundation的样式不会被干扰，适合需要同时运行两个框架的过渡阶段。

三、渐进式迁移的执行建议 #

1. 优先级排序：先迁移高频访问页面、新开发页面或样式问题较多的页面，最后处理低频页面，降低迁移风险。
2. Rails 7适配：升级到Rails7后，建议用Importmap管理Bootstrap依赖，替代CDN：

   # config/importmap.rb
   pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/dist/esm/index.js"
   pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.3/dist/js/bootstrap.esm.js"
   

   然后在app/javascript/application.js中导入：

   import "@popperjs/core"
   import "bootstrap"
   

3. 逐步清理：每完成一批页面迁移，就检查并移除对应的Foundation遗留代码（如类名、JS调用），全部迁移完成后再卸载Foundation gem。

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