Node+Express中SendGrid发送Jade模板邮件CSS不生效问题求助

你遇到的问题其实是邮件客户端的CSS支持限制导致的——和浏览器不同，几乎所有主流邮件客户端（比如Gmail、Outlook、Yahoo邮箱）都会忽略外部CSS文件的引用（也就是你layout.jade里的<link>标签），所以即使你的CSS在浏览器里正常显示，放到邮件里就会失效。

下面是具体的解决办法，按可靠性排序：

1. 直接使用内联样式（最推荐） #

把CSS样式直接写在HTML元素的style属性里，这是所有邮件客户端都支持的方式。修改你的email.jade：

extends layout
block content
  div.body-container(style='background-color: #f8f9fa; padding: 24px; border-radius: 8px;')
    h1.title(style='color: #2d3748; font-family: Arial, sans-serif; margin-top: 0;') Footworks School of Dance
    p(style='color: #4a5568; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.6;') Hi #{name}, title is <strong>#{title}</strong>.

2. 用工具自动将CSS转为内联样式（兼顾开发效率） #

如果你的样式比较复杂，手动写内联太麻烦，可以用juice这个Node.js库帮你自动把内嵌的CSS转为内联样式。

首先安装依赖：

npm install juice --save

然后修改你的发送邮件代码，在渲染HTML之后加入内联处理：

router.post('/registered/email/send', function (req, res, next) { 
  var template = process.cwd() + '/views/email.jade'; 
  fs.readFile(template, 'utf8', function (err, file) { 
    if (err) { 
      return res.send('ERROR!'); 
    } else { 
      var compiledTmpl = _jade.compile(file, { filename: template }); 
      var context = { title: 'Title text', name: req.body.name }; 
      var html = compiledTmpl(context); 

      // 新增：用juice处理内联CSS
      const juice = require('juice');
      const inlinedHtml = juice(html);

      var request = sg.emptyRequest({ 
        method: 'POST', 
        path: '/v3/mail/send', 
        body: { 
          personalizations: [ 
            { 
              to: [ { email: req.body.email } ], 
              subject: 'Subject', 
            } 
          ], 
          from: { email: 'test@gmail.com' }, 
          content: [ { type: 'text/html', value: inlinedHtml } ], 
        }, 
      }); 
      sg.API(request, function (error, response) { 
        if (error) { 
          console.log('Error response received'); 
        } else { 
          res.send('success'); 
        } 
      }); 
    } 
  }); 
});

这样你可以在layout.jade的<head>里正常写<style>块定义样式，juice会自动把这些样式转成元素的内联样式，既方便开发，又保证邮件兼容性。

3. 内嵌