J'envoie un email avec nodemailer et handlebars, je reçois l'email correctement mais les styles ne sont pas appliqués.
Voici mon code pour envoyer un email :
const hbsConfig = {
viewEngine: {
extName: '.hbs',
partialsDir: path.join(__dirname, '../../../../src/modules/hq-nd/templates/'),
layoutsDir: path.join(__dirname, '../../../../src/modules/hq-nd/templates/'),
defaultLayout: ''
},
viewPath: path.join(__dirname, '../../../../src/modules/hq-nd/templates/'),
extName: '.hbs'
};
const transporter = nodemailer.createTransport({
host: 'smtp.sendgrid.net',
port: 465,
secure: true,
auth: {
user: 'zzz',
pass: process.env.SENDGRID_SECRET,
},
});
transporter.use('compile', hbs(hbsConfig));
const email = {
from: "Boxtribe <123@gmail.com>",
to: params.username,
subject: 'Reset your zzz Password',
template: 'forgot-password',
context: {
...user,
token: tokenRes.token,
url: process.env.HARMONY_URL
}
};
const response = await transporter.sendMail(email as Mail.Options);C'est mon modèle :
<html>
<head>
<meta
content="text/html; charset=utf-8"
http-equiv="Content-Type"
/>
<link
href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<style>
body {
font-family: Lato, Tahoma, Verdana, Segoe, sans-serif;
}
.header {
margin: 0 auto;
min-width: 320px;
max-width: 620px;
}
.logo {
display: block;
margin: auto;
}
.center {
text-align: center;
}
.title {
margin: 0;
}
.invoice {
font-size: 14;
color: #71777D;
line-height: 1.2;
word-break: break-word;
}
.btn-success
{
color:#fff;
background: #22caab;
border-radius: 5px;
transition:.15s linear;
border-color: #22caab;
}
.powered {
font-size: 12;
line-height: 1.2;
word-break: break-word;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
</style>
<div class="header">
<img
class="logo"
src="{{url}}img/teal_bto_head.png"
width="150"
alt="logo"
>
<h3 class="center title">
Reset Password
</h3>
<p class="invoice center">
Harmony recently received a request for a forgotten password.
</p>
<p class="invoice center">
To change your password, please press the next button:
</p>
<p class="invoice center">
<a href="{{url}}reset-password.php?t={{token}}" class="btn btn-success" >Continue Setup</a>
</p>
<p class="powered center">
Powered by Qorus Inc.
</p>
</div>
</body>
</html>J'ai testé dans http://tryhandlebarsjs.com/ et il s'affiche correctement :
Mais dans l'email n'est pas appliquer les classes css :
