Laravel 5 - 电子邮件中的内联 CSS
Posted
技术标签:
【中文标题】Laravel 5 - 电子邮件中的内联 CSS【英文标题】：Laravel 5 - Inline CSS in email 【发布时间】：2015-06-22 02:24:08 【问题描述】：我正在处理我的第一个 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 - 不起作用。有人在Issue 的末尾发布了一些代码，但我不知道如何实现它（也不知道它是否适用于 Laravel 5）。
bweston92/laravel-inline-css-mailer - 看起来很有希望，但似乎没有做任何事情，CSS 没有被内联。
有人有什么建议吗？我真的很希望能够为电子邮件内联 CSS，尤其是当我在发送之前注入 html 时（来自 WYSIWYG 编辑器）。
【问题讨论】：
只是一个建议，将您的新课程发布为您问题的答案，而不是将其嵌入您的问题中；) 希望有更好的建议.. 我明白了，但是你可以把它作为答案发布而不接受它，期待有人给你一个更好的答案 对，对。将在几分钟内发布。 :) 【参考方案1】：受到bweston92/laravel-inline-css-mailer 的启发，我无法开始工作，我使用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 Email Template 或 HTML Email Boilerplate。
<!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" />
</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
【讨论】：
我也试过你的课，但我看不到你在哪里转换你的css？？我在转换函数中添加了这一行： $css = file_get_contents(public_path().'/css/main.css');也可以转换 css，但布局不是我预期的 100%！ 你在使用 Laravel 并且通过 Composer 安装了 CssToInlineStyles 吗？ 在类中，我在 convert() 方法中转换 CSS。在使用中，您在实例上调用此方法 - $content = $inlineEmail->convert()。您在创建此类的实例时传入常规电子邮件视图，将其内联，然后将生成的内联视图回显到 emails.raw，仅包含 !! $内容！！。你有任何错误吗？ 我也是，我添加了要转换的行并在转换函数中设置内联css，一些样式像字体一样应用，，但其他人没有 嗯。稍后我将使用我使用的电子邮件模板更新我的答案。听起来像是 CSS 或内联问题。以上是关于Laravel 5 - 电子邮件中的内联 CSS的主要内容，如果未能解决你的问题，请参考以下文章
将外部 CSS 转换为内联 CSS 用于 Rails 中的邮件