Inconsistent loading order of CSS in dev mode
See original GitHub issueBug report
Describe the bug
It’s based on https://github.com/zeit/next.js/issues/10148#issuecomment-614478653. When _app.jsx contains component which imports postcss module the order of css chunks is inconsistent. Most likely css from module is inserted before global css.
To Reproduce
I created a repo for you https://github.com/Joozty/nextjs-css. It’s a fork from https://github.com/zeit/next.js/issues/10148. So the steps to reproduce are almost identical.
Expected behavior
CSS in dev mode should be imported/inserted the same way as on production, i.e. global css first and then modules.
Thanks a lot 😃
Issue Analytics
- State:
- Created 3 years ago
- Reactions:7
- Comments:16 (2 by maintainers)
Top Results From Across the Web
Inconsistent loading order of CSS in dev mode #11946 - GitHub
It's based on #10148 (comment). When _app.jsx contains component which imports postcss module the order of css chunks is inconsistent. Most ...
Read more >Css not loading in production mode when using nextjs
Problem. When building and starting a production build of our application, no css is loaded. CHecking the devtools, I can see a myriad...
Read more >Find invalid, overridden, inactive, and other CSS
The first thing to do is inspect the element and make sure that your new CSS is actually applied to the element. Sometimes,...
Read more >MiniCssExtractPlugin - webpack
For development mode (including webpack-dev-server ) you can use style-loader, because it injects CSS into the DOM using multiple and works faster.
Read more >Debugging CSS - Learn web development | MDN
In order to do so I'll be using an example file. Load this up in a new tab if you want to follow...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

I’m installed the exact version
9.3.6-canary.9and unfortunately in production mode there are still duplicate css.I’m using sass, but I don’t think that could be the problem.
Yes, my problem has not been resolved either. Should we open a new issue, @Timer? Or maybe move to there: https://github.com/zeit/next.js/issues/12099