如何使用 webpack 内联样式？答案

【问题标题】：How to inline styles with webpack?如何使用 webpack 内联样式？
【发布时间】：2018-07-08 17:12:12
【问题描述】：

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

例如，使用一些示例 CSS，

.example { 
    font-size: 2em 
}

以及组件内的一些 HTML，

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

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

【问题讨论】：

标签： reactjs webpack webpack-style-loader

【解决方案1】：

我找到了一个这样做的库：

https://github.com/Automattic/juice

它工作得很好，虽然它不使用我喜欢的 webpack。

【讨论】：

【解决方案2】：

在你的组件渲染函数中返回之前：

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>

【讨论】：

这不是我需要的。我已经用样式加载器加载了样式。我需要内联电子邮件的样式，并且我宁愿保留我用于 Web 的相同组件。