CSS not loading in Laravel 5 sent email

Question

I have included all Bootstrap 3 CSS files and other project related JS and CSS files with unique folder names inside the public folder. Here's an example of the structure:

public/pnotify
public/bower_components/bootstrap
public/ckeditor

I have included all these JS and CSS links with exact path on main template and everything loads correctly through out the project, but when I give a Blade file as view for Laravel 5 mail. The CSS doesn't load and everything is messed up in the received email, while the same Blade file is rendered accurately within project. Is it because I haven't implemented asset management of Laravel and mail system of Laravel loads CSS only from assets or I am missing something? Please some one clarify.

Bogdan · Accepted Answer · 2015-05-23 18:26:35Z

8

You can link external CSS files in an email, but most likely they will be blocked by the email clients for security reasons. So you'll need to inline the CSS inside your email templates for them to work.

You can try using the following package to help make it easier:

Laravel Mail CSS Inliner

answered May 23, 2015 at 18:26

Bogdan

44.7k12 gold badges130 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sumit Over a year ago

does this Inliner works perfectly or there are some other working alternatives too?I seriously need to make my mail view correctly rendered in every mail for my project!.Linking external CSS in mail view is same as linking external CSS files in blade or procedure is different?In github page of 'Laravel Mail CSS Inliner' it has given example for Inining CSS that are in same page within '<style>' tags,does this inliner work for external CSS too?

Bogdan Over a year ago

This works well as far as I've tested it, especially because the integration with Laravel is seamless. It does however have the drawback of needing to place the CSS in <style> tags inside the view itself (so no outside linking). There are alternatives that allow external CSS linked files such as InlineStyle but you have to apply it to the email body before sending (I have not tested this package myself so I can't say how well it works).

Bogdan Over a year ago

Side note: Having emails render exactly the same in all clients is more of an art than an exact science, because email clients are not browsers and they have many restrictions that may alter the way your email is rendered. So just using the CSS you use for your website for an email is not a solution in itself, you need to fine tune and test you emails in multiple clients to be sure they work as expected. Tools like Litmus can help with that process, but they're not very cheap.

surajs1n · Accepted Answer · 2019-12-02 08:55:25Z

3

Change the following:

return $this->subject('new message')->view('layouts.mail.bussiness_partner')->with('data',$this->data);

to this:

return $this->subject('new message')->markdown('layouts.mail.bussiness_partner')->with('data',$this->data);

use markdown then it supports bootstrap

edited Dec 2, 2019 at 8:55

surajs1n

1,5816 gold badges23 silver badges36 bronze badges

answered Dec 2, 2019 at 5:39

Ramiz Khan

636 bronze badges

Comments

junkystu · Accepted Answer · 2016-02-29 21:00:03Z

0

I've come across this question whilst searching for a CSS inliner myself. Laravel Mail CSS Inliner seems to work better with Laravel 5 and above. I am currently using it with 5.2 and it's great.

answered Feb 29, 2016 at 21:00

junkystu

1,5071 gold badge13 silver badges15 bronze badges

Collectives™ on Stack Overflow

CSS not loading in Laravel 5 sent email

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related