如何使用 webpack 内联样式？

Question

有没有办法让 webpack 自动内联样式？

例如，一些样本 CSS，

.example { 
    font-size: 2em 
}

还有一些 HTML 在组件中，

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

我希望 webpack 输出： <div style="font-size: 2em;" />

Answer 1

在你之前的组件渲染函数中 return:

const style = {
     // your styles here as an object  convert hyphenated css property names to camelCase and pass a string as the value
     backgroundColor: 'blue' 
}

然后在元素中：

<p style={style} >  content </p>

Answer 2

我找到了一个可以执行此操作的库：

https://github.com/Automattic/juice

虽然它没有使用我更喜欢的 webpack，但它工作得很好。

如何使用 webpack 内联样式？

How to inline styles with webpack?

reactjs

webpack

webpack-style-loader