如何在Laravel邮件中加载样式表解决自定义CSS不生效问题

问题原因 #

绝大多数邮件客户端出于安全、兼容性考虑，会完全屏蔽外部引入的CSS样式表，大部分客户端也不支持写在<head>标签内的全局样式，只有行内样式可以被正常识别渲染，你当前用普通Web端页面的写法做邮件模板自然不会生效。

解决方法 #

方案1：使用Laravel Markdown邮件自带的样式转换能力（推荐） #

Laravel的Markdown邮件默认自带样式自动内联功能，你只需要按官方规范调整即可：

• 先运行命令导出Laravel邮件的默认配置和样式文件：

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

• 运行成功后会在resources/views/vendor/mail目录生成邮件专用模板，在resources/css/mail.css中写入你自定义的.my-custom-header、.my-custom-paragraph样式，Laravel渲染邮件时会自动把这些样式转换成行内样式注入到HTML中。
• 不要让邮件模板继承普通Web端的layouts.app布局，你的ebol.blade.php调整为邮件专用写法：

@component('mail::message')
<h2 class="my-custom-header"> Hello World </h2>
<p class="my-custom-paragraph"> some text... </p>
@endcomponent

方案2：手动写行内样式（兼容性最好） #

直接把所有CSS样式写在对应标签的style属性中，不需要依赖任何工具，适配所有邮件客户端：

<h2 style="font-size:20px;color:#333;margin-bottom:15px;"> Hello World </h2>
<p style="font-size:14px;line-height:1.5;color:#666;"> some text... </p>

方案3：使用第三方CSS内联扩展 #

如果不想手动修改代码，可以安装laravel-css-inliner这类扩展，它会自动把你模板中引用的CSS样式全部转换为行内样式，不需要调整原有模板的类名写法。

注意事项 #

邮件模板不要复用Web端的公共布局，Web布局里的导航栏、JS脚本、响应式逻辑大多无法被邮件客户端识别，容易出现额外的渲染异常，建议单独做邮件专用的轻量布局。

内容的提问来源于stack exchange，提问作者eylay