Есть ли расширение / плагин для веб-пакета для создания встроенного CSS из кода SASS?

Question

Мне нужно создать определенный HTML код только с inline CSS.

У меня есть этот HTML-файл:

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

И у меня есть этот Sass файл:

#highlighted {
    background: #ff0;
}

Теперь мне нужен этот выходной HTML-код со встроенным CSS:

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

Есть ли какое-либо расширение, плагин, инструмент, что-нибудь для веб-пакета, чтобы решить эту проблему?

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/.