生成单独的 CSS 文件与将 CSS 直接注入 <style> 标记（在构建 React 应用程序时）答案

【问题标题】：Generating a separate CSS file vs. Injecting CSS directly into a <style> tag (when building React apps)生成单独的 CSS 文件与将 CSS 直接注入 <style> 标记（在构建 React 应用程序时）
【发布时间】：2021-09-19 23:43:10
【问题描述】：

我是 React 新手，想问一下：配置 webpack 时应该使用 style-loader 还是 mini-css-extract-plugin？我读到使用mini-css-extract-plugin 更好地用于缓存目的，并且使用style-loader 有时可能会导致FOUC（无样式内容的Flash），因为浏览器可能需要一些时间来加载JS。

【问题讨论】：

看起来你有两个用于 mini-css-extract-plugin 的参数，而没有用于 style-loader 的参数。实际上，一个每周有 1000 万次下载，另一个每周有 800 万次下载，所以它们都很好。
Stack Overflow 不是一个收集“想法”（意见）的网站，其中 x 更好，或者我应该使用 x 或 y 来做 z？请查看help center 和How to Ask 了解有关主题的问题类型。
Heretic Monkey，嗯，你这么说有点奇怪，我发现这个 (stackoverflow.com/questions/3630341/…) 你用（任何想法/“想法”）完成你的问题。当你做同样的事情时不要批评:)

标签： javascript css reactjs

【解决方案1】：

这完全取决于你。

但是当您从事大型项目时。管理代码会更复杂。所以我建议你使用单独的 css 文件。

如果你想避免全局样式，你也可以通过使用 css 模块来实现。了解更多关于 css 模块的信息click here

您也可以使用 Styled 组件编写 scss 类似代码了解更多关于样式化组件click here

谢谢

【讨论】：