CODEWITHSUNDEEP
htmlcsswebpacksass
netdjw
netdjw

Reputation: 6007

Is there any extension / plugin to webpack to create inline CSS from SASS code?

I need to create a specific HTML code with only inline CSS.

I have this HTML file:

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

And I have this Sass file:

#highlighted {
    background: #ff0;
}

Now I need to this output HTML code with inline CSS:

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

Is there any extension, plugin, tool, anything to webpack to solve this problem?

Upvotes: 2

Views: 272

Answers (1)

Danziger
Danziger

Reputation: 21161

html-webpack-inline-style-plugin does that using juice, so this:

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

Will produce this:

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

You can play around with juice and its different options online here: https://automattic.github.io/juice/.

Upvotes: 2

Related Questions