next.js: Inconsistent loading order of CSS in dev mode
Bug 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 😃
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 7
- Comments: 16 (2 by maintainers)
I’m installed the exact version
9.3.6-canary.9
and 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
Maybe I have a similar bug:
"node-sass": "npm:sass@1.26.2"
with@use
imports.@zein/next-css
with custom config,Production (button is visible - its mistake):
Development (button is hidden - its correct):
Just no ideas, how to fix it…
And also there is such a strange thing: styles duplicates appears after HOVERing over the button… Production: Production (after hover)
I also have the same issue @iksent, were you able to solve this thing ?
@fabinppk, hello. I think v9.3.6-canary.0 fixes other problems “Correct Global and Local CSS Loading Order in Dev”. No words about avoiding duplicates. And I have no problems is dev, only in production 😦