How to append stylesheets in laravel email

user_5661319 0
Viewed 1569

I'm trying to send an email when user submits a form in laravel. So in my Controller I have :

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

And in my ShareEBOL class, in build method I have:

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

And in my ebol.blade.php file I have:

@extends('layouts.app')

@section('content')

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

@endsection

And in my layouts.app blade file I have appended some stylesheets :

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

Email is sent successfuly, but the problem is css styles that I have included in custom.css are not applied in email. How can I fix this?

laravel
6 Answers

Steps to customize css - Markdown Mailables

It seems that you had created your custom ui. so I try to help based on your custom need.

Option 1:

  1. Create path html/themes. for example: resources/views/panel/reports/ebol/html/themes

  2. copy your custom.css to html/themes

  3. edit config/mail.php like below:

    ...

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

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

    ],

Now default theme for all markdowns will be custom.css

Option 2:

another option is to set the theme using $theme property of mailable class instead of setting that in config/mail.php

for example:

class ShareEbol extends Mailable
{
    use Queueable, SerializesModels;

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

...

Option 3:

another option is to use Mail Notifications that is well documented here : Laravel Mail Notifications

user_59999390

You can use the Laravel Markdown Mailables. Which gives you the ability to use theme and also you can customise these themes or you can create you own theme.

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

Step 1 - Generate a Markdown Mailables with blade file using following command.

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

This will create your Mail Function and blade also. You can update the function as per your need to make data dynamic.

Step 2 - Customizing The Components

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

This command will publish the Markdown mail components to the resources/views/vendor/mail directory. The mail directory will contain an html and a text directory, each containing their respective representations of every available component. You are free to customize these components however you like. https://laravel.com/docs/8.x/mail#customizing-the-components

Step 3 - Customizing The CSS

After exporting the components, the resources/views/vendor/mail/html/themes directory will contain a default.css file. You may customize the CSS in this file and your styles will automatically be converted to inline CSS styles within the HTML representations of your Markdown mail messages.

If you would like to build an entirely new theme for Laravel's Markdown components, you may place a CSS file within the html/themes directory. After naming and saving your CSS file, update the theme option of your application's config/mail.php configuration file to match the name of your new theme.

To customize the theme for an individual mailable, you may set the $theme property of the mailable class to the name of the theme that should be used when sending that mailable.

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

user_100639030

I think you have only one way: you may customize the CSS in default.css file after exporting the mail components. Your styles will automatically be in-lined within the HTML representations of your Markdown mail messages.

Step 1: Publishing the mail components

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

Step 2: In resources/views/vendor/mail/html/themes, you customize default.css file.

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

user_107096750

Take into account that as this is an E-Mail not all of the CSS properties can be applied, at least not the modern ones.

You may try to publish the markdown styles with

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

And take a look at the generated style.css for the markdown mail. From here, you may change things like the background color, or buttons color. (Things like hover, or animations, or too complex style properties may not work).

user_104259990

I faced similar issue before. You have to add the css codes in each mail template separately. Adding .css file's relative url in the template will look good when you see it in the local machine as view, but will break when it is sent as email. Css files don't render in emails. I had to add the css codes inside the tag.

user_75847390

As stated here you can encounter issues with some mail clients not handling properly external CSS files.

Check about Laravel Markdown mail components & customization

After exporting the components, the resources/views/vendor/mail/html/themes directory will contain a default.css file. You may customize the CSS in this file and your styles will automatically be converted to inline CSS styles within the HTML representations of your Markdown mail messages.

You could also use something like laravel-mail-css-inliner to "automatically" inline the the CSS file's content in the template render.

From readme:

Most email clients won't render CSS (on a <link> or a <style>). The solution is inline your CSS directly on the HTML.

Do you see an HTML <link> to your CSS file in the mail body, or do you already have your CSS inlined into the body (and so it may be an issue with CSS syntax or tag syntax)?

user_56086940
Related