I have been following some Symfony Casts tutorial to send emails using Symfony Mailer bundle. I am also using Bootstrap 4 installed with NPM and Webpack Encore. I can’t figure out how to provide styles to these templated emails:
Some controller
use SymfonyBridgeTwigMimeTemplatedEmail;
use SymfonyComponentMailerMailerInterface;
use SymfonyComponentMimeAddress;
class SomeController extends AbstractController
{
public function send(MailerInterface $mailer)
{
$email = (new TemplatedEmail())
->from(new Address('email@email.com', 'My app'))
->to(new Address($contact_form->getEmail(), $contact_form->getName()))
->subject('Hemos recibido tu mensaje')
->htmlTemplate('email/contact_form.html.twig');
$mailer->send($email);
}
}
The template email/contact_form.html.twig is extending email/layout.html.twig:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{{ absolute_url(asset('build/app.css')) }}">
</head>
<body>
{% block body %}{% endblock %}
<script src="{{ absolute_url(asset('build/app.js')) }}"></script>
</body>
</html>
Style and scripts have the right link reference when I see the email HTML source but they don’t have any styles or scripts applied anyway.
Usually, in “normal” layout template I use {{ encore_entry_link_tags('app') }} and {{ encore_entry_script_tags('app') }} but that would generate a relative path to the URLs, I have tried wrapping them in absolute_url() function, but it does not work.
I have tried this Github issue by creating a file macros.html.twig, then importing them in the template and adding {{ encore_absolute_link_tags('app') }} and {{ encore_absolute_script_tags('app') }} in the layout. But I still don’t have any applied styles to the email.
What is the right way to import Webpack/Encore styles / scripts to templated emails?
Advertisement
Answer
Most email clients will not download external CSS files and apply styles and apply them to the email HTML. You really shouldn’t count on that (and linking to an external javascript file is even less likely to succeed, as it appears you are doing in your example).
Not only that, but email clients will most of the time ignore any <style> tags, even if the resources are not external.
What you should do is use the advise in the documentation and inline your CSS styles.
{% apply inline_css(source('@css/email.css')) %}
<h1>Welcome {{ username }}!</h1>
{# ... #}
{% endapply %}
But inlining styles generated by webpack encore is is not as straigh-forward and requires you jump a few more hoops.
This guide explains how to do it for Foundation styles, but it’s easily adjusted for Bootstrap.