MJML：mj-include 无法读取文件答案

【问题标题】：MJML: mj-include fails to read fileMJML：mj-include 无法读取文件
【发布时间】：2018-08-08 07:32:11
【问题描述】：

首先，我是电子邮件标记的新手。所以我决定使用 mjml 来构造一个字母，但我遇到了问题——标记没有被正确呈现： MJML 不包含组件，我不明白为什么。项目是使用 npm 包 mjml-component-boilerplate 创建的，因为我想注册自己的组件。

我的 index.mjml

<mj-body>
    <mj-include path="./components/blocks/header.mjml" />
    <mj-include path="./components/blocks/main.mjml" />
    <mj-include path="./components/blocks/footer.mjml" />
  </mj-body>

输出 index.html 的一部分（与 main.mjml 和 footer.mjml 相同）

<div>
        <!-- mj-include fails to read file : ./components/blocks/header.mjml at D:\projects\ctc_projects\chetv\site\reshala_promo\email\components\blocks\header.mjml -->

header.mjml

<mj-section>
    <mj-column>
        <mj-div css-class="header">
            <mj-image
                    src="/assets/images/logo.png"
                    alt="ЧЕ!"
                    title="https://chetv.ru/"
                    href="https://chetv.ru/"
                    target="__blank"
                    css-class="header__logo"
            />
        </mj-div>
    </mj-column>
</mj-section>

而且，如果它对我的 MjDiv 组件有意义的话

import { registerDependencies } from 'mjml-validator'
import { BodyComponent } from 'mjml-core'

registerDependencies({
    'mj-body': ['mj-div'],
    'mj-column': ['mj-div'],
    'mj-section': ['mj-div'],

    'mj-div': [
        'mj-text', 'mj-image', 'mj-accordion',
        'mj-carousel', 'mj-divider', 'mj-group',
        'mj-navbar', 'mj-raw', 'mj-social',
        'mj-div', 'mj-a', 'mj-p', 'mj-h1'
    ]
});

export default class MjDivComponent extends BodyComponent {
  static endingTag = true;

  static allowedAttributes = {
      'css-class': 'css-class',
      'style': 'style'
  };

  render() {
    return `<div
        ${this.htmlAttributes({
          class: this.getAttribute('css-class'),
          style: this.getAttribute('style')
        })}
      >${this.getContent()}</div>`;
  }
}

【问题讨论】：

标签： javascript node.js html-email markup mjml

【解决方案1】：

您演示了将<mj-include> 组件放在<mj-body> 之后（如https://mjml.io/documentation/#mj-include 中所示）。它对我来说不起作用。

当我将<mj-include> 元素放在<mj-head> 之后时，它确实有效。祝你好运！

我将您帖子的其余部分解释为背景，而不是问其他问题。否则请告诉我。

顺便说一句：除了stackoverflow，另一个很好的MJML信息来源是https://mjml.slack.com。

【讨论】：

嗯，实际上，最后我决定不使用这个 MLML，但是你的回答很有用

【解决方案2】：

    <mj-section padding="0px">
        <mj-column>
            <mj-text align="center" padding="0px">
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
            </mj-text>
        </mj-column>
    </mj-section>

【讨论】：

请考虑对您的仅源代码答案进行解释