Search code examples
cssreactjscreate-react-app

create-react-app npm run build wrong css order

I got in my index.js

import './styles/index.css';
import './styles/responsive.css';

the index.css contains browser desktop styling while the responsive.css will overwrite when the screen gets smaller like in mobile. In development this works just fine, but using the compiled css after running npm run build makes the responsive styling messed up. After trying to debug I found that in build/static/css/main*.chunk.css the entries from responsive.css went first than the index.css and that created the problem.

is there any way to correct the issue? i could combine the responsive.css into index.css but I feel that's just a workaround

Solution

  • I believe there is no answer to your question. If you google for 'wrong css order' you may found github issues for webpack older than 2 years. Like that one https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/548 and there are many others.

    I have solved this by combining styles into one file. I use scss so did something like:

    // main.scss

@import 'globals';
@import 'responsive';

    and in js

    import main.scss