2

我一直在关注一些Symfony Casts 教程来使用Symfony Mailer包发送电子邮件。我也在使用安装了 NPM 和 Webpack Encore 的 Bootstrap 4。我不知道如何为这些模板化电子邮件提供样式：

一些控制器

use Symfony\Bridge\Twig\Mime\TemplatedEmail;
use Symfony\Component\Mailer\MailerInterface;
use Symfony\Component\Mime\Address;

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);
    }
}

模板email/contact_form.html.twig正在扩展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>

当我看到电子邮件 HTML 源代码时，样式和脚本具有正确的链接参考，但无论如何它们都没有应用任何样式或脚本。

通常，在我使用的“正常”布局模板中{{ encore_entry_link_tags('app') }}，{{ encore_entry_script_tags('app') }}但这会生成 URL 的相对路径，我尝试将它们包装在absolute_url()函数中，但它不起作用。

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?

4

1 回答 1

2

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.

于 2020-06-03T07:18:00.983 回答