如何在 laravel 电子邮件中附加样式表答案

【问题标题】：How to append stylesheets in laravel email如何在 laravel 电子邮件中附加样式表
【发布时间】：2021-09-06 16:49:36
【问题描述】：

当用户在 laravel 中提交表单时，我正在尝试发送电子邮件。所以在我的控制器中我有：

Mail::to($request->to)->send(new \App\Mail\ShareEbol());

在我的ShareEBOL 类中，在构建方法中我有：

public function build()
{
    return $this->markdown('panel.reports.ebol');
}

在我的ebol.blade.php 文件中，我有：

@extends('layouts.app')

@section('content')

    <h2 class="my-custom-header"> Hello World </h2>
    <p class="my-custom-paragraph"> some text... </p>

@endsection

在我的layouts.app刀片文件中，我附加了一些样式表：

<link href="{{asset('assets/css/custom.css')}}" rel="stylesheet" type="text/css" />

电子邮件发送成功，但问题是我在custom.css 中包含的css 样式未应用于电子邮件。我该如何解决这个问题？

【问题讨论】：

我认为您需要直接嵌入样式 <style>...</style> 。电子邮件客户端倾向于阻止来自链接的样式表
就像@apokryfos 说的，你会想在电子邮件中使用的示例
这可能也有帮助：github.com/fedeisas/laravel-mail-css-inliner
@eylay 看看这个post 如果可能有帮助的话。

标签： laravel

【解决方案1】：

自定义 css 的步骤 - Markdown Mailables

您似乎已经创建了自定义 ui。所以我会尝试根据您的自定义需求提供帮助。

选项 1：

创建路径html/themes。例如：resources/views/panel/reports/ebol/html/themes
将您的custom.css 复制到html/themes

编辑config/mail.php，如下所示：

...

'markdown' => [
 'theme' => 'custom', // custom.css

 'paths' => [
     resource_path('views/panel/reports/ebol'),
 ],

],

现在所有降价的默认主题将是custom.css

选项 2：

另一种选择是使用可邮寄类的$theme 属性设置主题，而不是在config/mail.php 中设置主题

例如：

class ShareEbol extends Mailable
{
    use Queueable, SerializesModels;

    public $theme = 'custom'; // custom.css

...

选项 3：

另一种选择是使用Mail Notifications，此处有详细记录：Laravel Mail Notifications

【讨论】：

【解决方案2】：

您可以使用 Laravel Markdown Mailables。这使您能够使用主题，也可以自定义这些主题，或者您可以创建自己的主题。

https://laravel.com/docs/8.x/mail#markdown-mailables

第 1 步 - 使用以下命令生成带有刀片文件的 Markdown Mailables。

php artisan make:mail ShareEbol --markdown=emails.panel.reports.ebol

这也将创建您的邮件功能和刀片。您可以根据需要更新函数以使数据动态化。

第 2 步 - 自定义组件

php artisan vendor:publish --tag=laravel-mail

此命令会将 Markdown 邮件组件发布到 resources/views/vendor/mail 目录。邮件目录将包含一个 html 和一个文本目录，每个目录都包含它们各自对每个可用组件的表示。您可以随意自定义这些组件。 https://laravel.com/docs/8.x/mail#customizing-the-components

第 3 步 - 自定义 CSS

导出组件后，resources/views/vendor/mail/html/themes 目录将包含一个default.css 文件。您可以自定义此文件中的 CSS，您的样式将自动转换为您的 Markdown 邮件消息的 HTML 表示中的内联 CSS 样式。

如果你想为 Laravel 的 Markdown 组件构建一个全新的主题，你可以在 html/themes 目录中放置一个 CSS 文件。命名并保存 CSS 文件后，更新应用程序 config/mail.php 配置文件的主题选项以匹配新主题的名称。

要为单个邮件自定义主题，您可以将邮件类的 $theme 属性设置为发送邮件时应该使用的主题名称。

https://laravel.com/docs/8.x/mail#customizing-the-css

【讨论】：

【解决方案3】：

我认为你只有一种方法：你可以在导出邮件组件后自定义default.css文件中的CSS。您的样式将自动内联在您的 Markdown 邮件消息的 HTML 表示中。

第 1 步：发布邮件组件

php artisan vendor:publish --tag=laravel-mail

第 2 步：在resources/views/vendor/mail/html/themes 中，您自定义default.css 文件。

https://laravel.com/docs/6.x/mail#customizing-the-components

【讨论】：

【解决方案4】：

请注意，由于这是一封电子邮件，因此并非所有 CSS 属性都可以应用，至少不是现代的。

您可以尝试使用

发布降价样式

php artisan vendor:publish --tag=laravel-mail

并查看为降价邮件生成的 style.css。从这里，您可以更改背景颜色或按钮颜色等内容。（悬停、动画或过于复杂的样式属性等可能不起作用）。

【讨论】：

【解决方案5】：

我以前遇到过类似的问题。您必须分别在每个邮件模板中添加 css 代码。在模板中添加 .css 文件的相对 url 当您在本地计算机中看到它作为视图时看起来不错，但当它作为电子邮件发送时会中断。 Css 文件不会在电子邮件中呈现。我必须在标签内添加 css 代码。

【讨论】：

【解决方案6】：

如here 所述，您可能会遇到一些邮件客户端无法正确处理外部 CSS 文件的问题。

查看Laravel Markdown mail components & customization

导出组件后，resources/views/vendor/mail/html/themes 目录将包含一个 default.css 文件。您可以自定义此文件中的 CSS，您的样式将自动转换为您的 Markdown 邮件消息的 HTML 表示中的内联 CSS 样式。

您还可以使用 laravel-mail-css-inliner 之类的东西“自动”在模板渲染中内联 CSS 文件的内容。

来自自述文件：

大多数电子邮件客户端不会呈现 CSS（在 <link> 或 <style> 上）。解决方案是直接在 HTML 上内联您的 CSS。

您是否在邮件正文中看到您的 CSS 文件的 HTML <link>，或者您是否已经将 CSS 内联到正文中（因此这可能是 CSS 语法或标签语法的问题）？

【讨论】：