使用extract-text-webpack-plugin和链接HTML标头中的合并CSS文件有什么区别？

Question

根据我的理解,extract-text-webpack-plugin将您在React组件中导入的所有css文件捆绑到一个单独的CSS文件中.然后可以在HTML标头中引用单独的CSS文件以防止FOUC(Flash Of Unstyled Content).使用extract-text-webpack-plugin可以抵消在React组件js文件(如热加载)中导入CSS的一些好处.

那么使用extract-text-webpack-plugin和替换组件文件中的所有样式表导入与HTML模板头中的合并CSS文件的单个链接之间的区别是什么？

是否使用CSS模块或导入CSS是否重要？

更新:添加了澄清示例.

情景A:

1. component1.css(在component1.js中导入)
2. component2.css(在component2.js中导入)
3. 由extract-text-webpack-plugin生成的捆绑CSS文件(在HTML标题中调用)

情景B:

1. component1.css(未在js文件中引用)
2. component2.css(未在js文件中引用)
3. 使用SASS,Laravel mix.style方法等合并的主CSS文件(在HTML标题中调用)

为什么选择场景A而不是B？

Answer 1

阿里熊这个问题问得好！

如果你想使用 css 模块，那么是的，将 css 文件导入到 js 文件/react 组件中肯定有好处。主要的一个是您不再需要担心范围问题，或者担心在两个不同的领域编写同一个类。级联变得局限于每个组件。

如果您不使用 css 模块，那么根本没有多大好处。当然，您可以进行热重载，但还有其他解决方案可用。

希望有帮助！