如何在Rails 6（含Devise）项目中正确集成toastr-rails gem？

我明白你的困扰，Rails 6的Webpacker和老版本的Asset Pipeline处理资源的逻辑完全不一样，之前Rails 4的那套写法自然就失效了。咱们一步步调整，很快就能搞定：

1. 确认依赖安装（你这步是对的） #

yarn add toastr 这个命令没问题，已经把toastr安装到了项目的node_modules里。

2. 修正JavaScript的导入方式 #

你之前在assets/packs/application.js里用@import 'toastr'是错的，Webpacker用的是ES模块语法，得这么改：
打开app/javascript/packs/application.js，添加以下代码：

// 导入toastr核心模块
import toastr from 'toastr'
// 把toastr挂载到window对象上，这样全局（包括ERB里的脚本）都能访问到
window.toastr = toastr

3. 修正样式的导入方式 #

你之前用的*= require_toastr是Sprockets（Asset Pipeline）的语法，Webpacker不识别，选下面两种方式之一就行：

方式一：在JS里导入样式（推荐，和Webpacker的逻辑一致） #

同样在app/javascript/packs/application.js里添加：

import 'toastr/build/toastr.min.css'

方式二：用Asset Pipeline处理样式（如果你习惯这套） #

打开app/assets/stylesheets/application.scss，删掉原来的*= require_toastr，换成Sass的导入语法：

@import 'toastr/build/toastr.min';

4. 修复Flash消息的脚本逻辑 #

你的ERB脚本有两个小问题：一是没有转义消息内容（容易导致JS语法错误），二是Devise的Flash类型和Toastr的类型不匹配，调整成这样：

<!DOCTYPE html>
<html>
<head>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_pack_tag 'application' %> <!-- 别忘了这个！Webpacker编译的JS靠这个引入 -->
</head>
<body>
  <% unless flash.empty? %>
    <script type="text/javascript">
      <% flash.each do |type, message| %>
        <%# 把Devise的notice/alert映射成Toastr的success/error %>
        <% toastr_type = type == 'notice' ? 'success' : 'error' %>
        toastr['<%= toastr_type %>']('<%= j(message) %>');
      <% end %>
    </script>
  <% end %>

  <%= yield %>
</body>
</html>

重点提醒：别忘了在head里加<%= javascript_pack_tag 'application' %>，这是Webpacker编译后的JS文件的入口，之前你可能漏了，这也是Toastr加载不出来的关键原因之一！

5. 重新编译并重启服务 #

• 开发环境下，运行bin/webpack-dev-server（或者直接重启Rails服务器，它会自动触发Webpack编译）
• 生产环境下，运行RAILS_ENV=production bin/webpack预编译资源，再启动服务器

这样调整后，Toastr应该就能正常显示Flash消息了。

内容的提问来源于stack exchange，提问作者David Lee