Question

Css没有在电子邮件模板中工作，所以我的客户的任何电子邮件看起来都很难看。经过大量的谷歌搜索后，我看到了Laravel css内联的解决方案，但我不知道如何使用它们，

任何解决方案，以帮助我的CSS加载

@extends('layouts.master')
@section('title')
    XXXX | WELCOME
@endsection``
@section('body')
<div class="page text-center">

  <!-- Page Head-->
        <!-- Page Contents-->
  <main class="page-content">
    <!-- Search Engine-->
    <section class="section-98 section-sm-110">
      <div class="shell">
        <div class="offset-sm-top-66">
           <center>
            <img class='img-responsive' style='margin-top: -20px;margin-left: -5px;' width='329' height='67' src="{{URL::to('/images/icon1.png')}}" alt=''/>
          </center>
          <!-- Responsive-tabs-->
          <div data-type="horizontal" class="responsive-tabs responsive-tabs-classic">
            <p class="text-center alert alert-info">Welcome to XXXX <br> please verify your account by entering digits sent via sms.</p>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>
@endsection

以上是样本模板

谢谢。

Answer 1

对电子邮件使用内联css是正确的。

如果我们采用这行代码：

<img class='img-responsive' style='margin-top: -20px;margin-left: -5px;' width='329' height='67' src="{{URL::to('/images/icon1.png')}}" alt=''/>

内联css从样式标记开始。此时类标签什么都不做。要解决此问题，您可以在电子邮件的标题中添加<style></style>。所以你得到这样的东西：

<head><style>.img-responsive {margin-top: -20px; margin-left: -5px; width=329px; height=67px}</style></head>

现在您可以在代码中使用img-responsive类。

请注意，如果您使用的是bootstrap css，则需要将其放入样式代码中。

Answer 2

Laravel会自动将样式从主题的CSS文件中移出并放入行内。请参阅docs中的自定义CSS 。

发布默认主题的布局和CSS：php artisan vendor:publish --tag=laravel-mail。
这将为您提供default.css中的resources/views/vendor/mail/html/themes文件。 default.css中的“默认”是您的主题名称。
（可选）将resources/views/vendor/mail目录复制到最适合您的应用的位置。例如resources/views/mail
（可选）自定义mail/layout.blade.php中的HTML或mail/themes/default.css中的CSS。
设置您的配置。编辑/config/mail.php并提供邮件布局和主题名称的路径：


    // in config/mail.php

    /*
    |--------------------------------------------------------------------------
    | Send Emails Using Markdown
    |--------------------------------------------------------------------------
    |
    */

    'markdown' => [
        'theme' => 'default',            # The name of your theme (default.css)
        'paths' => [                     # The path to your /html and /text dirs
            resource_path('views/emails/layouts')
        ]
    ],

（可选）如果要创建多个“主题”，请复制并重命名样式表-例如mytheme1.css。然后，使用该主题将CSS文件的名称用作Mailable的属性。


   // in e.g. app/Mail/MyMailable.php

    /**
     * The name of the theme that should be used when formatting the message.
     *
     * @var string|null
     */
    public $theme = "mytheme1.css";

主题文件中的CSS将“自动内嵌在Markdown邮件的HTML表示中。”

Answer 3

使用降价模板 https://laravel.com/docs/5.8/mail#markdown-mailables

创建视图：

php artisan make:mail MailableClass --markdown=markdown_view

使用markdown（）方法指定视图：

#/app/Mail/MailableClass.php
    public function build() {
        return $this->from(…)
                    ->markdown('view_name');
    }

您还可以通过以下方式更改默认主题：

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

您的默认样式将位于/resources/views/vendor/mail/html/themes/default.css

Answer 4

这是我做的：

创建一些目录来保存模板，css和其他相关事物（可能是图像）的源文件。我把它放在资源/ src / emails /下面，结构如下：

/ - holds package.json and gulp files. /assets/stylesheets - put your (s)css files here /assets/templates - just put your template files here

安装宝石＆＃39;预制商＆＃39;和＆＃39; nokogiri＆＃39; （最好使用Gemfile）（你需要Ruby）
您需要使用npm安装以下软件包：
- gulp
- 吞掉-premailer
- 吞-HTML实体
- 就我的具体情况而言，我们也使用gulp-sass和coffee-script。

运行gulp并使用以下gulp文件构建模板（gulpfile.coffee，因为这是咖啡脚本）

gulp = require('gulp')
premailer = require('gulp-premailer')
sass = require('gulp-sass')
entities = require('gulp-html-entities')

build = 'build/'
templates_dest = './../../views/emails/'
images_dest = '../../../public/img/emails/'

gulp.task 'css', ->
    gulp.src 'assets/stylesheets/mail.scss'
        .pipe sass().on('error', sass.logError)
        .pipe gulp.dest build + 'css'

gulp.task 'templates', ->
    gulp.src 'assets/templates/*.php'
    .pipe premailer()
        .on 'error', (err) ->
            console.log err
    .pipe entities('decode')
    .pipe gulp.dest templates_dest

gulp.task 'images', ->
    gulp.src 'assets/images/**/*'
    .pipe gulp.dest images_dest

gulp.task 'watch', ->
    gulp.watch "assets/templates/*.php", ['templates']
    gulp.watch "assets/images/**/*", ['images']
    gulp.watch ["assets/stylesheets/*", "assets/stylesheets/**/*"], ['css', 'templates']

gulp.task 'default', ['css', 'templates', 'images']
gulp.task 'build', ['css', 'templates', 'images']
gulp.task 'watch', ['css', 'templates', 'images', 'watch']

你需要调整一下以满足自己的需要。我目前只有1个scss文件。我们还将用于公共/等的特定文件夹的图像移动

我遇到的最大问题是premailer gem用它的html实体替换了字符。这个偏离是一个问题，因为在我们的刀片模板中，我们使用＆＃39; {＆＃39;和＆＃39;}＆＃39;以及＆＃39;＆gt;＆＃39; （当使用类似$ model-＆gt;名称的东西时）现在通过使用html-entities lib解决了这个问题。这个解决方案似乎对我有用。但请记住，你可能会遇到问题。

Laravel电子邮件模板样式

4 个答案: