webpack是否有任何扩展/插件可以通过SASS代码创建内联CSS？

Question

我需要仅使用HTML创建一个特定的inline CSS代码。

我有这个HTML文件：

<div id="highlighted">This is the highlighted text.</div>

我有这个Sass文件：

#highlighted {
    background: #ff0;
}

现在，我需要使用内联CSS来输出HTML代码：

<div id="highlighted" style="background: #ff0;">This is the highlighted text.</div>

Webpack是否有扩展程序，插件，工具或其他任何东西可以解决此问题？

Answer 1

html-webpack-inline-style-plugin使用juice来做到这一点，所以：

<style>#highlighted{ background: #ff0; }</style>
<div id="highlighted">This is the highlighted text.</div>

会产生这个：

<div id="highlighted" style="background: #ff0;">This is the highlighted text.</div>

您可以在https://automattic.github.io/juice/上在线体验juice及其不同选项。