EmailExt Jenkinsfile 发送HTML邮件时CSS样式未嵌入无法生效问题

问题根因 #

• 绝大多数邮件客户端（Gmail、Outlook、企业邮箱等）默认会过滤HTML文件中<head>标签内的<style>块、外部CSS链接，仅支持行内（inline）CSS样式
• Email-ext插件默认直接读取原始HTML文件内容发送，未做邮件客户端适配，非行内样式会被接收端直接丢弃，最终展示为无格式的纯文本结构

具体解决方法 #

方法1：转换为行内CSS样式（兼容性最高，优先推荐） #

所有样式直接写在标签的style属性中，可适配所有主流邮件客户端：

<!-- 不兼容邮件客户端的写法 -->
<style>
  .success { color: #00b300; font-weight: bold; }
</style>
<div class="success">用例执行成功</div>

<!-- 兼容写法 -->
<div style="color: #00b300; font-weight: bold;">用例执行成功</div>

如果是第三方工具生成的固定格式报告，可在Jenkins构建阶段用工具批量转换：

1. 提前配置Node.js环境，安装inline-css工具：

npm install -g inline-css

2. 执行转换命令生成适配后的HTML文件：

inline-css -i ${WORKSPACE}/path_to_report.html -o ${WORKSPACE}/mail_report.html

3. 修改Jenkinsfile中email-ext配置，读取转换后的文件：

email-ext attachmentsPattern: "filePathToBeAttached", mimeType:'text/html', body: readFile("${env.WORKSPACE}/mail_report.html"),to: "acbd@gmail.com", subject:"test report"

方法2：调整Email-ext全局配置 #

进入Jenkins全局管理→系统配置，找到Extended E-mail Notification配置模块：

• 勾选Allow embedded CSS选项，开启嵌入式CSS支持
• 取消勾选Use pre-formatted HTML选项，避免插件自动转义HTML标签和样式内容

方法3：调整CSS放置位置 #

如果不想做行内转换，可把所有CSS样式从<head>标签移到<body>标签最开头的<style>块中，部分邮件客户端会识别内的样式，兼容性比放在中更高。

额外注意事项 #

• 示例代码中to: acbd@gmail.com"缺少字符串开头的双引号，修正为to: "acbd@gmail.com"避免Jenkinsfile语法报错
• 不要使用相对路径的图片、字体等资源，所有外部资源需替换为公网可访问的绝对路径，或转成base64格式直接内嵌到HTML中
• 避免使用flex、grid等高级CSS布局，优先使用table标签做页面结构，减少样式兼容问题

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