手动调用 premailer 不是内联样式答案

【问题标题】：Calling premailer manually isn't inlining styles手动调用 premailer 不是内联样式
【发布时间】：2016-01-22 22:58:45
【问题描述】：

我正在使用 Sendgrid 的模板系统，需要手动内联一些 CSS 内容，这些内容将包含在 Sendgrid smtpapi 调用中。

Premailer 似乎实际上并没有内联 css 样式。我可以检查调用Premailer.new 的结果，但processed_doc 和doc 都没有内联样式。

我尝试过的不同方法：

直接包含css文件：

header = <<-HTML
  <div class="preview-content">
    #{data["content"]}
  </div>
HTML

p header
=>  "<div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the&nbsp;blind&nbsp;texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. </p>\n</div>\n"

premailer = Premailer.new(header, with_html_string: true, adapter: :nokogiri,css: [Rails.root.join('app', 'assets', 'stylesheets', 'email_base.css').to_s], input_encoding: "UTF-8", verbose: true)

p premailer.processed_doc.to_html
=> "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<html><body>\n<div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the&nbsp;blind&nbsp;texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>\n</div>\n</body></html>\n"

premailer.doc.to_html 返回没有内联 css 的相同内容。

我检查了 css 文件是否可以访问，并且样式适用于 .preview-content p。

向文档添加标题

header = <<-HTML
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
    <link rel="stylesheet" href="/asset/email_base.css" media="all">
  </head>
  <body width="100%" height="100%" bgcolor="#ffffff" style="margin: 0; padding: 0 20px;">
    <div class="preview-content">
      #{data["content"]}
    </div>
  </body>
  </html>
HTML

p header
=> '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n  <html xmlns=\"http://www.w3.org/1999/xhtml\">\n  <head>\n    <meta charset=\"utf-8\"> <!-- utf-8 works for most cases -->\n    <meta name=\"viewport\" content=\"width=device-width\"> <!-- Forcing initial-scale shouldn't be necessary -->\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <!-- Use the latest (edge) version of IE rendering engine -->\n    <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->\n    <link rel=\"stylesheet\" href=\"/asset/email_base.css\" media=\"all\">\n  </head>\n  <body width=\"100%\" height=\"100%\" bgcolor=\"#ffffff\" style=\"margin: 0; padding: 0 20px;\">\n    <div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the&nbsp;blind&nbsp;texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div>\n  </body>\n  </html>\n'

想要内联的css：

.the-excerpt,
.the-excerpt p,
.preview-content p
  // +responsive-text(18px, 30px)
  line-height: 1.8 !important
  font-size: 18px

我是否缺少手动内联 css 的东西？两种方式似乎都不会产生任何不同的结果。

【问题讨论】：

标签： ruby-on-rails premailer

【解决方案1】：

我现在正在尝试Premailer，但我自己也遇到了一些问题.. 但是我看到 Premailer 实际处理内容并得到不同的东西的方式（它删除了具有正确配置设置的类，至少）正在使用这种方法：

premailer = Premailer.new(html, { :with_html_string=>true, :verbose=>true, :remove_classes=>true })
return premailer.to_inline_css

【讨论】：

我遇到的问题是 Premailer 可以处理内联 html 片段，但不能使用 Rail 的资产管道。 Rails premailer 足够聪明，可以在内联之前将 scss 编译成 css，但不支持片段。