将外部 CSS 转换为 Rails 中邮件的内联 CSS

Question

我正在尝试创建一个应用程序，该应用程序将发送样式繁重的电子邮件，并要求客户端工作（Google Gmail 除外）。我研究了这个问题，看起来 Gmail 删除了外部文件中的 CSS 或嵌套在“style”标签中的 CSS。是否存在将样式从外部文件移动到内联的简单方法？

需要的东西：

<style>
  .wide { width: 100px; }
  .cell { display: block; }
</style>
<span class="wide cell">Sample</span>

并将其转换为：

<div class="wide cell" style="width: 100px; display: block;">Sample</div>

谢谢！

Answer 1

您可以查看以下一些精华：

• premailer 或 premailer-rails 用于 Rails
• mail_style
• premailer plus （上述版本的分支）
• < a href="https://github.com/imedo/awesome_email" rel="noreferrer">awesome_email
• roadie

我在写这个答案时还没有获胜者，但 premailer 似乎是最新的。

Answer 2

添加了预邮件程序：

def premailer(message)
  message.text_part.body = Premailer.new(message.text_part.body.to_s, with_html_string: true).to_plain_text
  message.html_part.body = Premailer.new(message.html_part.body.to_s, with_html_string: true).to_inline_css

  return message
end

def welcome(user)
  @user = user

  message = mail ...
end

Answer 3

您的推理只有一个问题......许多样式，甚至内联样式，都不被支持。

以下是电子邮件支持的内容的参考

在您的示例中，您使用display: 标记，Outlook 07+ 不支持

我的公司每天发送数千封电子邮件我经常参与构建它们。在实践中，内联样式是有效的，但它并不像只内联所有内容那么简单并且它会起作用。您必须非常小心您使用的内容以及如何使用它。我已经开始，用纯 HTML 和表格布局完成几乎所有事情。这基本上是我发现的几乎 100% 时间都能正常工作的唯一方法。

如果您要将此功能构建到一个会得到大量使用的应用程序中，我还强烈建议在 Email 中构建通过他们的 API 访问 Acid。虽然您可以编写出质量非常好的输出，但 Microsoft 无疑会找到某种方法使您的有效代码不起作用。 Acid 上的电子邮件将使用微软当时使用的任何疯狂方式进行渲染，以向您展示您的电子邮件是否有效。这是纯粹的天才，对于那些认真发送大量电子邮件的人来说是必需的。不，我不为公司工作......