如何在 Symfony Mailer 上使用带有 Bootstrap 的模板化电子邮件？

Question

我一直在关注一些 Symfony Casts tutorial to send emails using Symfony Mailer 捆绑包。我还使用 Bootstrap 4 安装了 NPM 和 Webpack Encore。我不知道如何为这些模板化电子邮件提供样式：

一些控制器

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 来源时，样式和脚本具有正确的 link 参考，但无论如何它们都没有应用任何样式或脚本。

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

我已经尝试 this Github issue 创建文件 macros.html.twig，然后将它们导入模板并在布局中添加 {{ encore_absolute_link_tags('app') }} 和 {{ encore_absolute_script_tags('app') }}。但是我仍然没有对电子邮件应用任何样式。

将 Webpack/Encore 样式/脚本导入模板化电子邮件的正确方法是什么？

Answer 1

大多数电子邮件客户端不会下载外部 CSS 文件并应用样式并将其应用于电子邮件 HTML。你真的不应该指望这一点（并且链接到外部 javascript 文件更不可能成功，因为你在你的例子中似乎正在做）。

不仅如此，电子邮件客户端大多数时候会忽略任何 <style> 标签，即使资源不是外部的。

你应该做的是使用文档中的建议和inline your CSS styles。

{% apply inline_css(source('@css/email.css')) %}
    <h1>Welcome {{ username }}!</h1>
    {# ... #}
{% endapply %}

但是 webpack encore 生成的内联样式并不那么直接，需要你多跳几圈。

此 guide 解释了如何针对 Foundation 样式执行此操作，但很容易针对 Bootstrap 进行调整。

如何在 Symfony Mailer 上使用带有 Bootstrap 的模板化电子邮件？

How to use templated emails with Bootstrap on Symfony Mailer?

php

symfony

twig

webpack-encore

symfony-mailer

一些控制器

模板 `email/contact_form.html.twig` 正在扩展 `email/layout.html.twig`:

如何在 Symfony Mailer 上使用带有 Bootstrap 的模板化电子邮件？

How to use templated emails with Bootstrap on Symfony Mailer?

php

symfony

twig

webpack-encore

symfony-mailer

一些控制器

模板 email/contact_form.html.twig 正在扩展 email/layout.html.twig:

模板 `email/contact_form.html.twig` 正在扩展 `email/layout.html.twig`: