There are two components wherein only one component will be rendered at a time conditionally. Every component has its respective CSS file which gets loaded inside the component using import statement, i.e. import 'Header.css'.
The problem is, even if one component is rendered, I could see both CSS files in the page Header. Is there any way to avoid loading unused /(unrendered) components?
Note 1: Can't use module css due to a technical reason as it needs entire app refactoring
Note 2: Found a couple of similar questions in SO but none of them have proper answers.
Load component css when component render
Load a component's CSS only if it is rendered
The below question has an accepted answer but the solution seems not working in react 18 with Webpack 4 :
