我无法在邮件刀片中创建工作风格。
最终目标是为邮件制定一个布局。到目前为止，为了测试小狗，我已经：
- 发送邮件的控制器
- 邮件组件
- 可邮寄类
- 电子邮件的布局，作为guest.blade.php jetstream文件的副本
- 一个特定的电子邮件刀片文件，即要添加到先前布局中的内容，是welcome.blade.php jetstream文件的副本
app\Http\Controllers\TestController.php
<?php
namespace AppHttpControllers;
use AppMailTestingMail;
use IlluminateHttpRequest;
use IlluminateSupportFacadesMail;
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 AppViewComponents;
use IlluminateViewComponent;
class MailLayout extends Component
{
/**
* Create a new component instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*
* @return IlluminateContractsViewView|Closure|string
*/
public function render()
{
return view('layouts.mail');
}
}
app\Mail\TestingMail.php
<?php
namespace AppMail;
use IlluminateBusQueueable;
use IlluminateMailMailable;
use IlluminateQueueSerializesModels;
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.blad.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但这是为laravelmix编写的，我不知道要将这个webpack.mix.js迁移到vite。
如有任何帮助或指导，我们将不胜感激，谢谢。
EDIT我最终将@Jaap的答案和其他包结合起来：https://github.com/fedeisas/laravel-mail-css-inliner
https://github.com/motomedialab/laravel-vite-helper
vite-helper并不理想，因为它在npmrun-dev运行时不起作用，但对我来说已经足够了。
对于希望内联样式的电子邮件。我不认为这是Vite、Tailwind或Blade开箱即用的功能。
然而，有一个方案似乎可以解决您的问题：https://github.com/fedeisas/laravel-mail-css-inliner
以前从未尝试过，但它似乎很活跃。然而，自动内联的做法在电子邮件中很常见，所以谷歌在这方面做得很好。你可能会找到一些适合你需要的包裹。
我不知道你是否还需要这个。
但我设法让它与一些包、自定义的vite配置和--watch标志配合使用。可能是我为此创作的最好的作品。
这允许您在本地快速构建电子邮件，其工作原理几乎与dev相同
首先，我在resources/css/中创建了一个名为mail.scss的文件，其中包含以下内容：
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
我只需要顺风顺水的基础知识，所以我暂时保留这些。
然后我安装了这些包
- https://github.com/fedeisas/laravel-mail-css-inliner
- https://github.com/motomedialab/laravel-vite-helper
在laravel-mail-css-inliner的配置中，我将添加我的SCSS文件，如：
config/css-inliner.php
<?php
return [
'css-files' => [
public_path(vite('resources/css/mail.scss', 'build', true))
],
];
现在我为我的电子邮件创建了一个新的vite配置，它非常基本：
vite-email.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/mail.scss',
],
refresh: true,
}),
],
});
现在，在我的package.json中，我终于添加了以下脚本：
{
"scripts": {
// Mail
"build:mail": "vite build --config ./vite-email.config.js --watch",
// General
"dev": "vite",
"build": "vite build",
"build:server": "vite build --ssr",
"build:all": "npm run build && npm run build:server"
},
}
正如您在顶部脚本build:mail中看到的，我正在使用我创建的vite-email.config.js。这只会将mail.scss构建到public/build文件夹中。
现在我也在使用标志--watch。这将启用汇总观察程序，并将观察所有文件并触发重建。
因此，如果我更改mail/order-sent.blade.php并添加一些额外的tailwindcss类。它将再次重建。
因为您使用的是自定义的vite配置，并且您只重建mail.scss，而不是app.js和app.scss，所以这将非常快。对我来说，它通常在100-500ms内构建。
反过来(我就是这么做的(。。。
你可以运行，对你当前的顺风进行缩小构建：
npx tailwindcss -o build.css --minify
然后在blade.php电子邮件布局文件中使用vite调用它
@vite('YOURPATH/build.css')
可选地，您可以添加composer包来编写内联css
- https://github.com/fedeisas/laravel-mail-css-inliner
您必须首先构建vite文件(npm run build(，然后将它们包含在您的邮件模板中。或者，您可以将它们内联到一个大的<style>块中。
如果你想要一个更好的例子，看看welcome.blade.php是如何在新的Laravel安装中做到这一点的。