有没有办法配置更漂亮，这样它就不会缩小 .mjml 模板中的内联 CSS？

Question

我使用的是.mjml模板和VSCode。我必须安装一个突出显示的扩展才能正常工作，但我注意到Prettier似乎将内联CSS(在电子邮件中很常见(从以下内容转换为：

p,
h1 {
color: #ffffff;
}
h1,
.text-h1 h1 {
font-size: 32px;
line-height: 1.1;
margin: 0 0 16px 0;
font-weight: 700;
}

到此：

p, h1 { color: #ffffff; } h1, .text-h1 h1 { font-size: 32px; line-height: 1.1; margin: 0 0 16px 0; font-weight: 700; }

我能够防止这种情况的唯一方法是在<mj-style>标记之前添加<!-- prettier-ignore -->，但我想知道是否没有更好的方法(配置？(在没有额外标记的情况下获得相同的结果。

参见：

• https://github.com/mjmlio/mjml/issues/2557
• 有没有一种方法可以告诉Prettier；块"；有特定的标记类型吗

Answer 1

根据我的研究和缺乏答案，整个MJML工具生态系统似乎没有处于最佳状态。我认为目前的最佳选择是使用我提供的解决方法。以下是可用选项的详细分类。

样式元素<mj-style>:(很可能是最佳选项(

<!-- prettier-ignore -->
<mj-style css-inline="inline" />  
.content {
color: green !important;
}
</mj-style>

• 优点：

  • 通过复制/粘贴标记在在线视觉编辑器中工作

• 缺点：

  • 无Prettier格式(ref(

外部CSS文件：

<mj-include path="./default.css" type="css" css-inline="inline" />

• 优点：
  • 您可以导入一个CSS文件，该文件将得到正常的Prettier处理
  • CSS位于文档外部的标准模式
• 缺点：
  • 如果不合并回CSS文件，它也无法与在线MJML编辑器工具一起使用。这很烦人，很难维护
  • <mj-include>可以根据我们的项目设置报告未命中标记的错误
  • 它不适用于"；官方的"；VSCode插件(你必须使用这个(

MJML内联样式：

<mj-text color="#fff" padding="0" font-weight="400" font-size="16px" line-height="1.65" />

• 优点：
  • 您不需要CSS
• 缺点：
  • 您可能会重复许多相同的样式，维护可能会出现问题

样式元素<mj-class>:

<mj-class name="blue" color="blue" />

优点：

• 受益于CSS的可重用性，而无需使用CSS，避免了Prettier问题

缺点：

• 在选择器方面不如CSS灵活，这可能会导致重复和维护问题