What is the difference between using extract-text-webpack-plugin and linking a merged CSS file in an HTML header?

Question

From what I understand extract-text-webpack-plugin bundles all css files imported in your React components into a single separate CSS file. The separate CSS file can then be referenced in your HTML header to prevent FOUC (Flash Of Unstyled Content). Using extract-text-webpack-plugin counteracts some of the benefits of importing your CSS in your React component js files such as hot-loading.

What is then the difference between using extract-text-webpack-plugin and replacing all stylesheet imports in your component files with a single link to a merged CSS file in your HTML template header?

Does it matter whether you use CSS modules or import your CSS?

UPDATE: Added example for clarification.

Scenario A:

1. component1.css (imported in component1.js)
2. component2.css (imported in component2.js)
3. bundled CSS file generated by extract-text-webpack-plugin (called in the HTML header)

Scenario B:

1. component1.css (not referenced in js files)
2. component2.css (not referenced in js files)
3. master CSS file merged using SASS, Laravel mix.style method etc. (called in the HTML header)

Why go with Scenario A and not B?

Answer 1

Good question ariebear!

If you want to use css modules, then yes, there's definitely a benefit to importing the css files into your js files/react components. The main one is that you no longer have to concern yourself with scoping issues, or worry about writing the same class in 2 different areas. The cascade becomes localized to each component.

If you're not using css modules, then there isn't much benefit at all. Sure, you get hot reloading, but there are other solutions available for that.

Hope that helps!