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

Question

我需要仅使用内联CSS创建特定的HTML代码。

我有这个 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>

您可以在此处在线尝试 juice 及其不同选项:https://automattic.github.io/juice/ .