Javascript 使用nodeEmailer和handlebar在邮件中收到的html样式丢失

我正在发送一个

cucumber\u report.html

文件以显示在电子邮件正文中。我正在使用

nodemailer

和

handlebar

来实现这一点。它在邮件中显示html的内容，没有样式（请参考最后的屏幕截图）。有没有任何方法可以在电子邮件中显示css样式

发送前的原始

cucumber\u report.html

邮件中显示的Html内容，我丢失了所有样式：

---

您需要插入css内联。外部css不太可能工作。这可能是因为一些客户端可以阻止外部源。当我检查css时，我可以看到它是作为HTML样式部分下的内联css编写的。在Chrome中打开电子邮件，使用DevTools检查HTML元素和css。你应该能自己找出问题所在。如果没有，复制html标记之间的所有内容并将其添加到您的问题中，或者如果代码太多，则将其放置在公共位置（codepen、JSFIDLE等），以便我们检查。我已将JSFIDLE添加到html中。小提琴看起来不错。当我检查邮件陷阱时，我发现添加的html被包装在#文档中。我无法将整个iframe内容复制到JSFIDLE中。@Molda我已经更新了问题，请看一下，

const nodemailer = require('nodemailer');
var handlebars = require('handlebars');
var fs = require('fs');


var readHTMLFile = function(path, callback) {
    fs.readFile(path, {encoding: 'utf-8'}, function (err, html) {
        if (err) {
            throw err;
            callback(err);
        }
        else {
            callback(null, html);
        }
    });
};

let transport = nodemailer.createTransport({
    host: 'smtp.mailtrap.io',
    port: 2525,
    auth: {
       user: 'user_name',
       pass: 'some_password'
    }
});


readHTMLFile(__dirname + '/reports/html_simple/cucumber_report.html', function(err, html) {
    var template = handlebars.compile(html);
    var replacements = {
         username: "Some thing"
    };
    var htmlToSend = template(replacements);
    var mailOptions = {
        from: 'from@testgroup.com',
        to : 'to@sometestgroup.com',
        subject : 'Test Report',
        html : htmlToSend,
        attachments: [
             { 
                filename: 'cucumber_report.html',
                path: 'reports/html_simple/cucumber_report.html'
             }
         ]
     };
     transport.sendMail(mailOptions, function (error, response) {
        if (error) {
            console.log(error);
            callback(error);
        } else {
            console.log(response);
          }
    });
});