Search code examples
reactjswebpackwebpack-style-loader

How to inline styles with webpack?

Is there a way for webpack to inline styles automatically?

For example, with some sample CSS,

.example { 
    font-size: 2em 
}

And some HTML inside a Component,

class Example extends React.Component {
    render() {
        return <div className={css.example} />
    }
}

I'd want webpack to output: <div style="font-size: 2em;" />

Solution

  • I found a library that does this:

    https://github.com/Automattic/juice

    It works perfectly, though it doesn't use webpack which I prefer.