Style not being applied to emails in --api-only mode

I am using --api-only mode and trying to send emails, but no style is being applied to the email…

I’m doing the same in view documetation

on my controller

await Mail.send('emails.welcome', { name: user.name }, message => {
  message
    .to(user.email)
    .from('contact@company.com', 'Yung Silva')
    .subject('Welcome to Station')
})

resources/views/emails/welcome.edge

{{ style('style') }}

<h1>Hello {{ name }}</h1>

<p>just a test</p>

public/style.css

h1 {
  background: #000;
  color: #fff;
}

p {
  color: green;
}

The email is sent but no style is applied.

already made sure middleware 'Adonis/Middleware/Static' is registered in start/kernel.js

Package version

Version 4.1
"@adonisjs/framework": "^5.0.9"

Node.js and npm version

v10.15.0

In theory loading external stylesheets on an email will never work, since many email clients will block them. You have to inline your css within the template to make it work and this is restriction of email clients and not AdonisJs.

Read this article https://litmus.com/blog/a-guide-to-css-inlining-in-email

2 Likes