将css转换为行内样式的方案css-inline

聊聊场景

• 发送邮件
• 在第三方网站中嵌入HTML
• 从其余编辑器拷贝编辑好的文章发布到微信、今日头条等自媒体

在以上场景使用行内样式的兼容性要高不少，也能够保持原样式不变

解决方案

• juice
• inline-css

这两种方案功能和 Api 很是类似,这里就以 juice 为例

安装

npm i juice --save

使用

import juice from 'juice'
const html = `
<div class="test"><h1>测试Juice</h1></div>
<style>
div{
    width: 90%;
    height: 500px;
}
</style>
`
const result = juice(html)
console.log(result)

结果

<div style="width: 90%; height: 500px;"><h1>测试Juice</h1></div>

原文连接：IT浪子の博客 > 将css转换为行内样式的方案css-inline