Laravel 5 - 在电子邮件中内联 CSS

Question

我正在处理我的第一个 Laravel 5 项目，迫切需要一种从我的电子邮件视图中内联 CSS 的方法。由于 Mandrill 的交付问题，我正在使用 Mailgun（不幸的是，Mandrill 具有 CSS 内置的内联功能，但 Mailgun 没有）。

似乎大多数用于在 Laravel 的电子邮件中内联 CSS 的软件包都已过时，大多数在 4.2 版上已停止正常工作。我试过：

Inlining CSS when sending an email with Mailgun in Laravel - Antoine Augusti - 似乎没有做任何事情，电子邮件没有内联。似乎 L5 中有几个根本差异打破了这种方法

fedeisas/laravel-mail-css-inliner - Does not work. Someone posted some code at the end of this Issue 但我不知道如何实现它（也不知道它是否适用于 Laravel 5）。

bweston92/laravel-inline-css-mailer - 看起来很有前途但似乎什么也没做，CSS 没有被内联。

有人有什么建议吗？我真的很想能够为电子邮件内联 CSS，尤其是当我在发送之前注入 HTML 时（从 WYSIWYG 编辑器）。

Answer 1

受 bweston92/laravel-inline-css-mailer, which I could not get to work, I came up with this little class using the TijsVerkoyen\CssToInlineStyles 包的启发。请随时提供建议或指出我更好的方向，只是需要一些东西。

    <?php namespace App\Library;

    use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;

    /**

 * Class inlineEmail
 * 
 * Returns rendered Email view with inlined CSS
 * @package App\Library
 */
class inlineEmail {
    /**
     * Filename of the view to render
     * @var string
     */
    private $view;
    /**
     * Data - passed to view
     * @var array
     */
    private $data;

    /**
     * @param string $view Filename/path of view to render
     * @param array $data Data of email
     */
    public function __construct($view, array $data)
    {
        // Render the email view
        $emailView = view($view, $data)->render();
        $this->view = $emailView;
        $this->data = $data;
    }

    /**
     * Convert to inlined CSS
     * 
     * @return string
     * @throws \TijsVerkoyen\CssToInlineStyles\Exception
     */
    public function convert()
    {
        $converter = new CssToInlineStyles();
        $converter->setUseInlineStylesBlock();
        $converter->setCleanup();
        $converter->setStripOriginalStyleTags();
        $converter->setHTML($this->view);
        $content =  $converter->convert();

        return $content;
    }
}

使用：

$data = ['someVar' => 'someValue'];
        $inlineEmail = new inlineEmail('emails.group-email', $data);
        $content  = $inlineEmail->convert();
        Mail::queue('emails.raw', ['content' => $content], function($message) use ($data) {
            $message->subject('Hello World')
                ->to('support@somewhere.org')
                ->bcc($data['recipients']);
        });

转换后的内联 HTML/CSS 然后传递给 emails.raw，其中仅包含 {!! $content !!}.

这是我用于大部分电子邮件的模板 - 它本质上是用于电子邮件的 Bootstrap 的最小版本。我会感谢它的作者，但无法准确找到我找到它的位置，如果有人知道请发表评论。还有许多其他模板，只需搜索 Bootstrap 电子邮件模板或 HTML 电子邮件样板。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Email Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
            font-size: 100%;
            line-height: 1.6;
        }
        img {
            max-width: 100%;
        }
        body {
            -webkit-font-smoothing: antialiased;
            -webkit-text-size-adjust: none;
            width: 100%!important;
            height: 100%;
        }
        a {
            color: #348eda;
        }
        .btn-primary {
            text-decoration: none;
            color: #FFF;
            background-color: #348eda;
            border: solid #348eda;
            border-width: 10px 20px;
            line-height: 2;
            font-weight: bold;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            border-radius: 25px;
        }
        .btn-secondary {
            text-decoration: none;
            color: #FFF;
            background-color: #aaa;
            border: solid #aaa;
            border-width: 10px 20px;
            line-height: 2;
            font-weight: bold;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            border-radius: 25px;
        }
        .last {
            margin-bottom: 0;
        }
        .first {
            margin-top: 0;
        }
        .padding {
            padding: 10px 0;
        }
        table.body-wrap {
            width: 100%;
            padding: 20px;
        }
        table.body-wrap .container {
            border: 1px solid #f0f0f0;
        }
        table.footer-wrap {
            width: 100%;
            clear: both!important;
        }
        .footer-wrap .container p {
            font-size: 12px;
            color: #666;

        }
        table.footer-wrap a {
            color: #999;
        }
        h1, h2, h3 {
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            line-height: 1.1;
            margin-bottom: 15px;
            color: #000;
            margin: 40px 0 10px;
            line-height: 1.2;
            font-weight: 200;
        }
        h1 {
            font-size: 36px;
        }
        h2 {
            font-size: 28px;
        }
        h3 {
            font-size: 22px;
        }
        p, ul, ol {
            margin-bottom: 10px;
            font-weight: normal;
            font-size: 14px;
        }
        ul li, ol li {
            margin-left: 5px;
            list-style-position: inside;
        }
        .container {
            display: block!important;
            max-width: 600px!important;
            margin: 0 auto!important; /* makes it centered */
            clear: both!important;
        }
        .body-wrap .container {
            padding: 20px;
        }
        .content {
            max-width: 600px;
            margin: 0 auto;
            display: block;
        }
        .content table {
            width: 100%;
        }
    </style>
</head>

<body bgcolor="#f6f6f6">
<!-- Main Body -->
<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container" bgcolor="#FFFFFF">
            <div class="content">
                <table>
                    <tr>
                        <td align="center">
                            <img src="https://example.com/images/logo.png" alt="Company Logo"/>
                        </td>
                    </tr>
                    <!-- Email content goes here .. -->
                    @yield('content')
                </table>
            </div>
        </td>
        <td></td>
    </tr>
</table>
<!-- /Main Body -->
<!-- Footer -->
<table class="footer-wrap">
    <tr>
        <td></td>
        <td class="container">
            <div class="content">
                <table>
                    <tr>
                        <td align="center">
                            <p>Footer goes here</p>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
        <td></td>
    </tr>
</table>
<!-- /Footer -->
</body>
</html>

扩展此视图的典型电子邮件如下所示：

@extends('emails.template')
@section('content')
    <tr>
        <td>
            <h1>Example Email</h1>
            <p>This is an example email. There are many like it but this one is mine.</p>
        </td>
    </tr>
    <tr>
        <td align="center">
            <p>
                <a href="http://example.com" class="btn-primary">This is a Button</a>
            </p>
        </td>
    </tr>
@endsection

Laravel 5 - 在电子邮件中内联 CSS

Laravel 5 - Inline CSS in email

css

html-email

laravel

blade

laravel-5