如何将 toastr-rails gem 添加到 Rails 6 项目？

Posted 2023-05-08

技术标签:

【中文标题】如何将 toastr-rails gem 添加到 Rails 6 项目？【英文标题】：How do you add toastr-rails gem to Rails 6 project? 【发布时间】：2020-03-05 16:58:41 【问题描述】：

我正在尝试将 toastr gem 添加到我的 Rails 6 项目中。我还安装了设计 gem。

我不了解 webpacker 以及如何使 toastr-rails webpacker 友好。

我已阅读所有文档。不要告诉我阅读文档。

这是我尝试过的：

yarn add toastr

然后在我的 assets/packs/application.js 文件中，我添加了：

@import 'toastr'

在我的 assets/stylesheets/application.scss 文件中，我添加了：

*= require_toastr

最后我的 layouts/application.html.erb 有这个代码：

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <% unless flash.empty? %>
    <script type="text/javascript">
        <% flash.each do |f| %>
        <% type = f[0].to_s %>
        toastr['<%= type %>']('<%= f[1] %>');
        <% end %>
    </script>
  <% end %>
  <%= yield %>
 </body>
</html>

我没有收到 toast 通知。我没有收到任何通知。但这段代码适用于我的 Rails 4 项目。

【问题讨论】：

【参考方案1】：

如果要使用 toastr-rails gem 添加 toastr，请使用资产管道而不是 webpack。

以下是添加toastr 和webpack 的步骤。

用纱线添加 toastr js

yarn add toastr

在 app/javascript/packs/application.js 中需要 toastr。我将它添加到全局以避免错误

global.toastr = require("toastr")

创建 app/javascript/stylesheets/application.scss 文件以导入自定义或库 css 文件

在 app/javascript/stylesheets/application.scss

@import 'toastr'

在 app/javascript/packs/application.js

app/javascript/stylesheets/application.scss

import "../stylesheets/application"

我为 flas 消息编写了一个辅助方法。将此方法添加到 application_helper.rb 或其他帮助程序

def toastr_flash
  flash.each_with_object([]) do |(type, message), flash_messages|
    type = 'success' if type == 'notice'
    type = 'error' if type == 'alert'
    text = "<script>toastr.#type('#message', '',  closeButton: true, progressBar: true )</script>"
    flash_messages << text.html_safe if message
  end.join("\n").html_safe
end

将toastr_flash 方法添加到layouts/application.html.erb 或任何你想要的地方

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <%= yield %>
    <%= toastr_flash %>
  </body>
</html>

【讨论】：

感谢您的回复。可悲的是它没有用。我什至尝试在@import 'toastr'; 和import "../stylesheets/application"; 中添加分号，但没有成功。但是您的回答可以帮助我了解 webpack。我会继续修修补补 @davidlee 是否出现错误？（查看控制台）如果是这样，什么是错误？【参考方案2】：

首先你需要将 toastr 添加到你的项目中

使用纱线