“将CSS作为内联样式编译为HTML

Question

我正在编写电子邮件HTML模板，并且某些电子邮件客户端不支持<style>用于指定CSS。应用CSS的唯一替代方法是使用内联样式（style属性）。是否有工具或库（Node.JS）用于将样式表应用于某些HTML并使用所应用的样式取回HTML？]

该工具不必支持很多选择器； id，类和元素名称选择器应足以满足我的需求。

所需示例：

// stylesheet.css
a { color: red; }

// email.html
<p>This is a <a href="http://example.com/">test</a></p>

// Expected result
<p>This is a <a href="http://example.com/" style="color: red;">test</a></p>

Answer 1

我认为您正在寻找juice。

简单地要求它，然后将它传递给您的html和css，然后让它像这样为您做繁重的工作：

var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');

它基于包括mootools的slick在内的许多成熟的库，并支持广泛的选择器。

您可能还对node-email-templates感兴趣，它是节点中动态电子邮件的不错包装。

Answer 2

这是可以满足您需求的动态javascript项目：

• juice。 1.7Mb，具有依赖性。
• juice。 5.9Mb具有依赖性。这是果汁的叉子，似乎比果汁包含更多的选择。这不会像榨汁一样丢弃媒体查询。按字母顺序对内联CSS规则进行排序。
• juice2。具有依赖项的4.0Mb。这个代替了promise。除了juice2，还有其他几种选择。有juice2选项，而其他选项则没有，可将html缩小。不会像其他人一样读取html文件本身。还扩展了styliner和styliner的简写。而且，如果您以某种方式修改了本机对象（例如，如果您使用的是compact），我不建议在解析margin之前使用它。

那么该使用哪个？好吧，这取决于您编写CSS的方式。它们对边缘情况都有不同的支持。最好检查一下并做一些测试以更好地理解。

Answer 3

进行了Google搜索并发现了此内容：padding

Answer 4

您可以使用sugar来应用$（'a'）。css（{color：'red'}）;

Answer 5

[另一种选择是回到基础。如果您希望链接为红色，请使用[]代替

this issue
做

http://inlinestyler.torchboxapps.com/
几乎任何浏览器，包括可怕的BlackBerry浏览器都可以处理。

Answer 6

2020解决方案jsdom + jquery