如何导入css文件在反应时生成静态html和注入导入css到html头标签？

Question

我正在尝试使用renderToStaticMarkup方法从react生成静态html。我现在面临的问题是，我无法将css导入react组件。我想在我的React组件中导入css，比如css模块（从“./style.css”导入样式）。然后将加载的css注入生成的静态html头部。我怎样才能做到这一点？

另外，由于一些限制，我无法使用webpack。如果有任何巴贝尔插件可用于此特定情况，那么请让我知道。

下面是我如何从react组件生成静态html：

const reactElement = require('react').createElement;
const ReactDomServer = require('react-dom/server');

const renderHTML = Component => {
  return ReactDomServer.renderToString(reactElement(Component))
}

Answer 1

您可以传递一个URL作为道具并呈现一个

Answer 2

如果没有很多自定义逻辑，这可能会很有挑战性。

如果您只想在初始渲染时内联CSS，然后在初始渲染后提取其余内容，样式化组件可能是一个更好的选择，因为它完全支持您尝试实现的功能，而无需太多配置：https://www.styled-components.com/docs/advanced#server-侧面渲染