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

Question

我正在尝试创建一个应用程序，该应用程序将发送样式繁多的电子邮件并要求客户端在 Google 的 Gmail 之外工作。我研究了这个问题，看起来 Gmail 从外部文件或嵌套在“样式”标签中的 CSS 中删除了 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（上述版本的分支）
• awesome_email
• 路人

我在写这个答案时没有赢家，但 premailer 似乎是最新的。

Answer 2

已添加

premailer

：

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% 时间都能正常工作的唯一方法。

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