Strapi V4邮件模板CSS样式发送后不生效问题求助

核心原因 #

邮件客户端（如Outlook、Gmail）对现代CSS支持极差，尤其是flex这类布局属性几乎不兼容；同时Strapi模板的变量转义规则可能导致样式代码被破坏。

具体解决步骤 #

1. 替换Flex布局为传统表格布局 #

放弃display: flex相关属性，改用HTML表格原生布局方式适配邮件客户端：

• 用<table>、<tr>、<td>构建所有排版结构
• 通过width属性设置列宽（优先用百分比或固定像素）
• 用align、valign属性控制内容对齐
• 用colspan、rowspan实现单元格合并

示例（替换原flex三列布局）：

<table style="width: 100%; table-layout: fixed;">
  <tr>
    <td style="width: 33%; text-align: center; padding: 0 10px;">
      <span>Votre commande a été prise en compte et sera bientôt expédiée par notre équipe !</span>
    </td>
    <td style="width: 33%; text-align: center; padding: 0 10px;">
      <span>Votre commande est en livraison. Elle sera prochainement entre vos mains</span>
    </td>
    <td style="width: 33%; text-align: center; padding: 0 10px;">
      <span>C'est arrivé ! Vous pouvez maintenant en profiter en vous connectant sur le site grâce au code d'identification à l'intérieur</span>
    </td>
  </tr>
</table>

2. 只使用邮件兼容的CSS属性 #

仅保留邮件客户端普遍支持的内联CSS属性，包括：

• width、height
• color、background-color
• font-family、font-size、font-weight
• text-align、text-decoration
• padding、margin（部分客户端仅支持上下方向的margin）

避免使用flex、align-content、justify-content、max-width这类不兼容属性，改用固定宽度或百分比宽度替代。

3. 修复模板变量的转义问题 #

针对Strapi默认的EJS模板引擎：

• <%= %>会自动转义HTML实体，导致样式或变量输出被破坏，改用<%- %>输出原始HTML内容
• 例如将<%= deleted.deleted.ref %>修改为<%- deleted.deleted.ref %>，确保变量和样式代码不被额外转义

4. 使用CSS内联工具预处理模板 #

如果习惯用类编写样式，可以用Node.js的juice库自动将<style>标签中的样式内联到HTML元素：

1. 安装依赖：npm install juice
2. 在Strapi邮件发送逻辑中预处理模板：

const juice = require('juice');
const fs = require('fs');

const templateHtml = fs.readFileSync('./path/to/your/template.html', 'utf8');
const inlinedHtml = juice(templateHtml);

// 用inlinedHtml作为最终邮件内容发送

内容的提问来源于stack exchange，提问作者Quentin Genet