是否有React中间件或Webpack加载器自动将CSS模块中的规则转换为内联样式？

Question

基本上，我正在尝试构建一个微服务，它使用我们内部构建的标准UI库来生成用于电子邮件的HTML模板，我们希望自动将所有CSS内联到每个标记中。

我们的标准UI库和我创建的电子邮件模板都是这样导入CSS：

// someComponent.jsx
import React from 'react';
import Button from '@shared-ui/Button';
import 'app/modules/someComponent.scss';

class someComponent extends React.Component {
    render() {
        return (
            <div className="someComponent">
                <Button>
                    Click here to learn more.
                </Button>
            </div>
        )
    }
}

export default someComponent;

SCSS文件：

// someComponent.scss
.someComponent {
    font-size: 42px;
}

我们从UI库中导入Button组件（已有自己的CSS）。

为了构建我们的网络应用程序，这种方法很好。但是，当构建适合电子邮件的HTML时，它缺乏，因为我们需要提供内联标签。

最终，当我在输入文件中调用renderToStaticMarkup()时，我希望呈现的HTML看起来像这样（包括我们从共享UI库导入的组件）：

<div style="font-size:42px">
    <button style="background-color: #fff; border: 1px">
        Click here to learn more.
    </button>
</div>

我在这方面遇到了困难。如果没有手工编写内联样式，我无法找到一种方法来实现这一点（这甚至不包括如何为我们的共享UI库获取内联样式）。