將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