我不能在我的邮件刀片中制作工作风格。
最后的目标是有一个邮件的布局。到目前为止，为了测试的目的，我有：
- 发送邮件的控制器
- 邮件组件
- 可邮寄类
- 电子邮件的布局，作为guest.blade.php jetstream文件的副本
- 一个特定的电子邮件刀片文件，即要添加到previus布局中的内容，是welcome.blade.php jetstream文件的副本
app\Http\Controllers\TestController.php
<?php
namespace App\Http\Controllers;
use App\Mail\TestingMail;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
class TestController extends Controller
{
public function __invoke(Request $request)
{
$result = Mail::to($request->user())
->send(new TestingMail());
return view('welcome');
}
}app\View\Components\MailLayout.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class MailLayout extends Component
{
/**
* Create a new component instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('layouts.mail');
}
}app\Mail\TestingMail.php
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
class TestingMail extends Mailable
{
use Queueable, SerializesModels;
/**
* Create a new message instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Build the message.
*
* @return $this
*/
public function build()
{
return $this->view('mails.general');
}
}resources\views\layouts\mail.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Scripts -->
@vite(['resources/css/app.scss', 'resources/js/app.js'])
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
</body>
</html>resources\views\mails\general.blade.php
<x-mail-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<x-jet-welcome />
</div>
</div>
</div>
</x-mail-layout>我收到的邮件没有样式。唯一的帮助，我发现是这个链接https://ralphjsmit.com/tailwind-css-multiple-configurations-laravel-mix，但这是为laravel混合写的，我不知道迁移这个webpack.mix.js到vite.
任何帮助或指导将不胜感激，谢谢。
EDIT我终于把@Jaap的答案和其他软件包结合起来了：https://github.com/fedeisas/laravel-mail-css-inliner
https://github.com/motomedialab/laravel-vite-helper
vite helper并不理想，因为当npm run dev正在运行时，它不工作，但它对我来说已经足够了。
3条答案
按热度按时间doinxwow1#
对于电子邮件，你希望你的风格是内联的。我不认为这是一个功能，Vite，Tailwind或刀片为此事有开箱即用。
不过，有一个软件包似乎可以解决您的问题：https://github.com/fedeisas/laravel-mail-css-inliner
我从来没有试过这个，但是它看起来很活跃。但是自动内联的做法在电子邮件中很常见，所以你可以在谷歌上搜索一下。你可能会找到一些适合你需要的软件包。
6l7fqoea2#
你必须先建立vite文件（
npm run build），然后将它们包含在你的邮件模板中。或者你可以将它们内嵌在一个大的<style>块中。如果您需要一个更好的示例，请查看
welcome.blade.php如何在全新的Laravel安装中执行此操作。v9tzhpje3#
反过来（我就是这么做的）...
你可以运行一个缩小你当前的顺风构建：
然后在blade.php电子邮件布局文件中使用vite调用它
你可以选择添加composer包来编写内联css