Issue
I am not able to make work styles in my mails blade.
The final goal is to have a layout for mails. By now, for testing puposes, I have:
- The controller that sends the mail
- The mail component
- The maileable class
- The layout for emails, as a duplicated of guest.blade.php jetstream file
- One specific email blade file, the content to add in the previus layout, is a duplicated of welcome.blade.php jetstream file
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>
I receive the mail with no styles. The only help that I found was this link https://ralphjsmit.com/tailwind-css-multiple-configurations-laravel-mix but that was wrote for laravel mix, I don't have idea to migrate this webpack.mix.js to vite.
Any help or orientation will be apreciated, thanks.
EDIT I finnally made it work, combining the @Jaap's answer and other package: https://github.com/fedeisas/laravel-mail-css-inliner
https://github.com/motomedialab/laravel-vite-helper
vite helper is not ideal because it does not work when npm run dev is running, but it is sufficient for me.
Solution
For emails you want your styles to be inlined. I don’t think that’s a functionality that Vite, Tailwind or Blade for that matter have out of the box.
There is a package, however, that seems to solve your problem: https://github.com/fedeisas/laravel-mail-css-inliner
Never tried that one before, but it seems quite active. However the practice of auto-inlining is quite common for emails so Google around for that one. You’ll probably find some package that suits your needs.
Answered By - Jaap Answer Checked By - Robin (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.