Next.js: Bug: Global styles included in _app.js are placing at the end of <head>
Bug report
Describe the bug
Global styles included in _app.js are placed at the end of head tag. They can overwrite component styles.
To Reproduce
Just import any global styles in _app.js and they will appear at the end of head tag.
Expected behavior
I expected to see the next appearing order of head tags in next.js:
- Tags included in
_document.js(works 馃憤) - Tags included in
_app.js(works 馃憤) - Global styles included in
_app.js(not working 馃槨) - Tags of pages (works 馃憤)
Screenshots
- OS: [macOS]
- Version of Next.js: [9.2.1]
JerryCauser
All 7 comments
Global styles should be placed in _document, especially something like normalize.css. On the other hand it's next/head expected behavior, adds tags end of the tags in document head. Can you elaborate why you want to achieve this.
enesTufekci
on 1 Feb 2020
Next.js says what if you wanna place global styles then place it in _app.js. If you try to do that in another place (in _docmuent.js or in custom HOC wrapper), then it will print CSS cannot be imported within pages/_document.js. Please move global styles to pages/_app.js.
So you are not right with:
Global styles should be placed in _document
Global styles should be placed in _app.js
And global styles should be above non-global styles. It is obvious for everyone who developed something.
I already answer for that:
Can you elaborate why you want to achieve this.
You can check the first message. I repeat one more time:
Otherwise, the global styles will overwrite the component styles, which should not be. For example, if I wanna overwrite some global css variables. With current behavior it's impossible.
P.S. And it is not next/head expected behavior. Bcs next/head works correctly everywhere. It is only global styles expected behavior
P.P.S. I apologize for micro-aggression, but it is frustrating that I have to explain such simple truths.
JerryCauser
on 1 Feb 2020
@timneutkens any thoughts?
JerryCauser
on 5 Feb 2020
This also conflicts with sass imports and compilation order. Inside of modules you are not able to use variables defined in globals styles.
Exelord
on 5 Feb 2020
related issue: https://github.com/zeit/next.js/issues/10148
Exelord
on 5 Feb 2020
JerryCauser
on 12 May 2020
Is this the same issue as https://github.com/zeit/next.js/issues/8534? Wondering if #11901 also fixes the issue I was having
malimccalla
on 12 May 2020
Related issues
sospedra
路
3Comments
flybayer
路
3Comments
rauchg
路
3Comments
YarivGilad
路
3Comments
pie6k
路
3Comments
Most helpful comment
This also conflicts with sass imports and compilation order. Inside of modules you are not able to use variables defined in globals styles.