使用nodemailer搭配handlebars发送邮件时CSS样式无法正常生效

绝大多数邮件客户端（包括Gmail、Outlook、国内主流邮箱等）会自动过滤<head>标签中的<style>样式定义，也不支持类选择器匹配样式，同时不支持部分现代CSS特性，这是你模板在浏览器测试正常、收到邮件样式失效的核心原因。

• 所有样式改用行内style属性编写，不要用类选择器
  示例修改参考：

  <!-- 原来的写法 -->
  <div class="header"></div>
  <a href="{{url}}reset-password.php?t={{token}}" class="btn btn-success" >Continue Setup</a>
  
  <!-- 改成行内样式的写法 -->
  <div style="margin: 0 auto;min-width: 320px;max-width: 620px;">
  <a style="color:#fff;background: #22caab;border-radius: 5px;border-color: #22caab;padding: 8px 16px;text-decoration: none;" href="{{url}}reset-password.php?t={{token}}">Continue Setup</a>
  

• 删除邮件客户端不支持的CSS属性
  你代码中的transition属性所有邮件客户端都不支持，直接删除即可；同时font-size要补全px单位，避免解析异常。
• 放弃使用外部引入的自定义字体
  谷歌字体在绝大多数邮件客户端中都无法正常加载，优先使用系统自带的安全字体，比如将字体回退规则调整为font-family: Tahoma, Verdana, Segoe, sans-serif;即可。
• 批量处理内联样式的自动化方案
  如果模板多、样式复杂不想手动改写，可以在Node.js项目中安装inline-css包，在模板渲染完成后、发送邮件前自动将所有CSS规则转换为行内样式，核心调用示例：

  const inlineCss = require('inline-css');
  // 渲染得到html字符串后调用
  const inlinedHtml = await inlineCss(renderedHtml, {
    url: ' ',
    removeStyleTags: true
  });
  

内容的提问来源于stack exchange，提问作者Jaime Rivera