Question

我正在使用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的内容？两种方式似乎都没有产生任何不同的结果。

Answer 1

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

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

手动调用预编程器不是内联样式

直接包含css文件：

在文档中添加标题

1 个答案: