Question

我正在尝试发送一封包含一些css样式表的电子邮件，因为有些选择器（之前，之后），我无法使用内联css。

有什么方法可以解决这个问题吗？

Answer 1

某些电子邮件客户端会忽略电子邮件标题中的<div class="**TYPO3 CATEGORIES**"><img .... ></div>标记，因此这不是一个可靠的选项。链接的CSS文件？更加不可靠的是，大部分电子邮件客户端都忽略了这样的样式表。

坦率地说，将样式应用于电子邮件的唯一可靠方法是使用内联CSS。

因此，我担心您的问题的答案是，如果不使用内联CSS，就无法可靠地设置电子邮件的样式。

您必须找到一种方法来使用“普通”html元素来模拟像<style>这样的选择器的行为。

Answer 2

过去的几年里事情发生了变化。您可以执行嵌入式CSS，内联或事件导入外部文件。请记住哪些电子邮件提供商支持此功能：

图片来源：https://www.litmus.com/blog/do-email-marketers-and-designers-still-need-to-inline-css/

就我而言，在使用AWS Lambda函数（本质上是NodeJS）时，我做到了：

TEMPLATE.JS

const css = require('./styles');
const generateTemplate = ({ name, from, title, company, siteUrl, report }) => {
    return `
          <html>
            <head>
              <style>
               ${css.styles()}
              </style>
            </head>
                <body>
                  <h2>Message sent from email ${from} by ${name} XXXX app.</h2>
                  <p>Title: ${title}</p>
                  <p>Company: ${company}</p>
                  <p>Site Url: ${siteUrl}</p>
                </body>
            </html>
          `
}

module.exports = { generateTemplate };

STYLES.JS

const styles = () => {
    return `
      h2 {
          color: red;
      }
    `
}

module.exports = { styles };

然后，当我使用 nodemailer 等电子邮件发件人解决方案时，我只是打电话给generateTemplate()，这是 AWS SES 服务

使用css样式发送电子邮件而不使用内联css

2 个答案: