Incorrect order of CSS in build version

Is this a bug report?

Yes

Environment

npx create-react-app --info prints empty result for some reason.

Steps to Reproduce

Using CRA 3.0.1.

1. create-react-app style_test
2. npm i bootstrap@3.3.7 --save
3. In index.js import two CSS files - first, a reset CSS, second, the bootstrap CSS.
4. Run dev server and production builds and compare results.

Expected Behavior

Both dev server and production builds should display text using bootstrap CSS.

Actual Behavior

Dev server works as expected, but production build contains two CSS chunks, one with bootstrap code and another with reset CSS, loaded in wrong order (bootstrap first). As a result, in production version text is not styled.

Bootstrap (and only bootstrap) appears in 2.*.chunk.css, while reset CSS and all my sass styles end up in main.*.chunk.css. What is the benefit of using two chunks, anyway? Just faster load times due to parallel loading of both scripts?

Reproducible Demo

https://github.com/d07RiV/style_test

[sliptype]

I was able to resolve this by importing my css files from within my sass entrypoint file.

main.scss

@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/react-bootstrap-typeahead/css/Typeahead';

It seems like this will preserve the order correctly

[m-nathani]

Wow… I faced this issue in create-react-app 4 …

The Dev server css order changed to in production build,

For me css of a node_module is taking preceding over my css.

Is there any possible solution that cra provides ?