RAILS 5.1替换bootstrap-sass为bootstrap后加载路径异常求助

我之前在升级Bootstrap版本时也碰到过一模一样的问题，给你整理了几个关键的排查和解决步骤：

1. 彻底清理旧的bootstrap-sass依赖 #

首先要确保旧的gem完全被移除，不然Rails的资产管道会一直加载它的路径：

• 打开你的Gemfile，确认已经删除了gem 'bootstrap-sass'，并且添加了gem 'bootstrap', '~> 4.1.1'
• 运行命令强制清理旧gem：

  bundle clean --force bootstrap-sass
  

• 重新安装依赖：

  bundle install
  

2. 清空Rails资产缓存 #

Rails会缓存资产相关的配置，这是很多人容易忽略的一步：

rails assets:clobber

这会删除所有预编译的资产和缓存文件，确保新的Bootstrap路径能被正确识别。

3. 更新资产导入代码 #

Bootstrap 4的rubygem和bootstrap-sass的导入方式不一样，必须修改对应的文件：

• 样式文件（app/assets/stylesheets/application.scss）：
  把原来的

  @import "bootstrap-sprockets";
  @import "bootstrap";
  

  替换成：

  @import "bootstrap";
  

• JavaScript文件（app/assets/javascripts/application.js）：
  把原来的

  //= require bootstrap-sprockets
  

  替换成：

  //= require bootstrap
  

  如果你用的是ES6模块，也可以改成：

  import 'bootstrap'
  

4. 重启Rails服务器 #

所有配置修改后，必须重启Rails服务器才能让新的资产路径生效，别直接刷新页面就完事了！

5. 验证加载路径是否正确 #

可以打开Rails控制台，检查资产路径里是否包含Bootstrap 4的路径：

Rails.application.config.assets.paths

输出里应该能看到类似/Users/xxx/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/bootstrap-4.1.1/assets/stylesheets的条目，如果没有，说明gem安装有问题，重新跑一遍bundle install再检查。

为什么会出现这个问题？ #

bootstrap-sass和官方的bootstrap rubygem是两个独立的包，Rails会自动把已安装gem的assets目录添加到资产加载路径中。如果旧的bootstrap-sass没有彻底移除，它的路径会一直存在，再加上你可能没更新导入代码，就会导致系统还是尝试加载旧版本的文件。

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