I have a react app setup with CRA.
In my App.js I would load my css files, components and define my routes.
import 'semantic-ui-css/semantic.min.css';
import './css/global.css';
import './index.css';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import ResetPassword from './pages/ResetPassword';
import ResetPasswordConfirm from './pages/ResetPasswordConfirm';
....
return (
<Router>
<Switch>
<Route path="/reset-password">
<ResetPassword intl={intl} />
</Route>
<Route path="/about-us">
...
</Route>
....
);
Now, I want to implement route-based code splitting with React.lazy.
I changed my component imports as follows:
const ResetPassword = lazy(() => import('./pages/ResetPassword'));
const ResetPasswordConfirm = lazy(() => import('./pages/ResetPasswordConfirm'));
and I updated my return method as follows:
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route path="/reset-password">
<ResetPassword intl={intl} />
</Route>
<Route path="/about-us">
...
</Route>
);
The problem I'm facing is that none of my CSS files which I import above in my App.js are being loaded into the components.
I didn't eject my app from CRA so I don't have any custom webpack config.
