Question

我正在尝试使用Zurb Foudation 6发送HTML电子邮件。在邮件客户端上发送HTML电子邮件之后，没有显示所有背景图像，但在网络版本中，每个人都可以。如何正确添加背景图片？为了exapmle我有这个代码：

<columns small="36" large="27" style="background-image: url('assets/img/BrownBG.png');>
    <spacer size="26"></spacer>
        <row>
            <columns small="18" large="18">
               <a>Link</a>
            </columns>
            <columns small="18" large="18">
               <a>Link</a>
            </columns>
        </row>
          <spacer size="20"></spacer>
        <row>
          <columns small="36" large="18">
              <p>Some paragraph</p>
          <spacer size="27"></spacer>
          </columns>
        </row>
</columns>

Answer 1

您需要在app.scss（或包含的文件）中放置样式，之后ZURB将能够生成正确的内联样式。不要编写内联样式手册。

此外，您需要设置babel将相对路径转换为abloluse，就像在* .html模板中一样。

.pipe($.if(!!awsURL, $.replace(/('|")(\/?assets\/img)/g, "$1" + awsURL)))

aws示例：

// Compile Sass into CSS
function sass() {
    var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
    return gulp.src('src/assets/scss/app.scss')
    .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
    .pipe($.sass({
      includePaths: ['node_modules/foundation-emails/scss']
    }).on('error', $.sass.logError))
    .pipe($.if(PRODUCTION, $.uncss(
     {
        html: ['dist/**/*.html']
      })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe($.if(!!awsURL, $.replace(/('|")(\/?assets\/img)/g, "$1" + awsURL)))
    .pipe(gulp.dest('dist/css'));
}

并在任务中添加creds管道。它看起来像这样：

// Build emails, then send to EMAIL
gulp.task('mail',
  gulp.series(creds, 'build', aws, mail));

这是初始化CONFIG var。

所必需的

如何在Zurb Foundation 6中将背景图像添加到HTML电子邮件中

1 个答案: