NestJS中使用Handlebars JS邮件模板的渲染与样式响应问题解决

邮件客户端的样式兼容性和网页差异极大，你的模板问题主要源于忽略了邮件渲染的特殊规则，以下是针对性修复方案：

核心修复要点 #

• 替换文档声明：移除XHTML过渡型声明，改用HTML5标准声明，绝大多数邮件客户端对HTML5的支持更稳定。
• 放弃外部样式与@import：Gmail、Outlook等主流客户端会过滤头部<style>或阻止外部资源加载，必须将所有关键样式内联到元素的style属性中。
• 禁用通配符选择器：* {box-sizing: border-box;}这类通配符在多数邮件客户端中不被支持，改用表格布局控制盒模型（邮件渲染的标准方案是用表格而非div做布局）。
• 调整响应式逻辑：邮件的响应式需依赖表格的宽度控制，媒体查询要直接作用于表格元素，而非自定义class（部分客户端对媒体查询中的class选择器支持有限）。
• 字体降级处理：不要用@import加载外部字体，直接在font-family中指定系统安全字体作为 fallback，避免字体加载失败导致样式错乱。

修改后的示例模板片段 #

<!DOCTYPE html>
<html style="font-family: arial, 'helvetica neue', helvetica, sans-serif;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>
    <style type="text/css">
        /* 仅保留邮件客户端支持的全局样式，优先内联 */
        @media screen and (max-width: 600px) {
            .template-table { width: 100% !important; }
            .action-button { width: 100% !important; }
        }
    </style>
</head>
<body style="font-family: 'Anek Bangla', arial, sans-serif; margin: 0 auto; color: #3e3e3e; background-color: #f4f4f4;">
    <!-- 用表格作为核心布局容器 -->
    <table class="template-table" width="600" cellpadding="0" cellspacing="0" style="margin: 0 auto; padding: 40px 24px; background-color: #fff;">
        <tr>
            <td>
                <!-- 内容区域 -->
                <p style="margin: 16px 0; line-height: 1.6;">邮件内容...</p>
                <!-- 按钮内联样式 -->
                <a href="#" class="action-button" style="display: inline-block; padding: 12px 24px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 4px;">操作按钮</a>
            </td>
        </tr>
    </table>
</body>
</html>

额外注意事项 #

• 所有间距、颜色、字体样式都要通过内联style属性定义，头部