Rails 5.1+Yarn开发：样式引用改为pack后报错求助
我来帮你搞定这个问题——在Rails 5.1里从Sprockets（传统资产管道）切换到Webpacker的pack方式引入样式，确实需要调整几个关键配置点，尤其是你用Yarn安装的Bootstrap。下面给你一步步拆解正确的迁移流程，以及排查报错的常见原因：
一、先理清核心逻辑
Rails 5.1默认同时支持Sprockets和Webpacker，但两者的加载机制完全不同。你之前用*= require bootstrap/dist/css/bootstrap是Sprockets的语法，而切换到pack方式后，得遵循Webpack的模块引入规则，不能混着用——这大概率是你报错的根源。
二、分步配置流程
1. 确保Webpacker和Bootstrap安装正确
- 如果是旧项目（非新建的Rails 5.1应用），先执行以下命令确保Webpacker配置完成：
bundle exec rails webpacker:install - 确认Bootstrap通过Yarn正确安装（你之前写的
yarn install bootstrap是错误的，正确的新增依赖命令是）：yarn add bootstrap
2. 修改Webpacker入口文件，引入Bootstrap样式
Webpacker的默认入口是app/javascript/packs/application.js，我们需要在这里引入Bootstrap的CSS（如果需要JS交互组件也一起引入）：
// 引入Bootstrap核心CSS import 'bootstrap/dist/css/bootstrap.css'; // 如果你需要Bootstrap的交互组件（比如模态框、下拉菜单），再引入JS import 'bootstrap'; // 如果你有自定义SCSS样式，也可以在这里引入，比如： // import '../stylesheets/custom.scss';
提示：如果要放自定义样式，可以在app/javascript下新建stylesheets文件夹，把你的SCSS文件放在这里。
3. 清理Sprockets里的Bootstrap引用
打开app/assets/stylesheets/application.scss，删掉原来的*= require bootstrap/dist/css/bootstrap这一行，避免和Webpacker的加载冲突。修改后可以保留自定义样式的Sprockets引用（或者如果完全迁移到Webpacker，也可以清空这个文件）：
/* *= require_tree . *= require_self */ // 这里如果还有仅用Sprockets加载的自定义样式，可以保留
4. 修改布局文件，替换为Webpacker的样式标签
把原来布局里的Sprockets样式标签：
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
替换成Webpacker的stylesheet_pack_tag：
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
注意：如果你的Webpacker入口文件名不是application.js，要对应改成你的实际文件名（比如入口是app.js就写stylesheet_pack_tag 'app'）
5. 清理缓存并重启服务
最后一步很关键，避免旧缓存导致的报错：
rails assets:clobber
然后重启Rails服务器——如果Webpack dev server没有自动启动，也可以手动执行./bin/webpack-dev-server来单独启动。
三、常见报错排查
如果还是报错，大概率是以下原因：
- 找不到Bootstrap文件：检查Yarn是否正确安装了Bootstrap（看
node_modules/bootstrap是否存在），或者import的路径是否写错（必须是bootstrap/dist/css/bootstrap.css，对应npm包的结构）。 - SCSS支持缺失：Rails 5.1的Webpacker默认支持SCSS，但如果是旧项目，可能需要手动安装依赖：
yarn add sass-loader node-sass - 样式加载冲突：如果同时保留了
stylesheet_link_tag和stylesheet_pack_tag，或者Sprockets里还在引用Bootstrap，会导致重复加载或样式冲突，必须移除其中一套引用。
补充：关于你新建应用的正常情况
你新建的Rails 5.1应用用Sprockets的*= require bootstrap/dist/css/bootstrap能正常运行，是因为Rails 5.1默认配置了Sprockets可以访问node_modules目录，所以能直接加载Yarn安装的包。但切换到Webpacker后，就得用Webpack的模块引入方式，不能再用Sprockets的语法了。
内容的提问来源于stack exchange，提问作者Blankman
