如何使用vite将tailwindcss样式应用于Laravel9中的电子邮件-码文网

我无法在邮件刀片中制作工作风格。

最终目标是为邮件布局。到现在为止,为了测试 puposes,我有:

发送邮件的控制器

邮件组件

可邮寄的类

电子邮件的布局，作为 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;
cl 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;
cl 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;
cl 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');
    }
}

资源\ 视图\ 布局\ mail.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta cht="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 cl="font-sans text-gray-900 antialiased">
            {{ $slot }}
        </div>
    </body>
</html>

resources\ views\ mails\ general.blade.php

<x-mail-layout>
    <x-slot name="header">
        <h2 cl="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>
    <div cl="py-12">
        <div cl="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div cl="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 mix 写的，我不知道将这个 webpack.mix.js 迁移到 vite。

任何帮助或方向将 apreciated，谢谢。

编辑我最终使它工作，结合 @ Jaap 的答案和其他包：https://github.com/fedeisas/laravel-mail-css-inliner

https://github.com/motomedialab/laravel-vite-helper

vite helper 并不理想，因为它在 npm run dev 运行时不起作用，但对我来说已经足够了。