#Global CSS Import Order

3 messages · Page 1 of 1 (latest)

young stream
#

I'm switching from the pages dir to the app dir, and the only thing really causing an issue currently is the order of css imports.

My structure is pretty simple. I have app/layout.tsx, and inside of there I am importing normalize.css from an npm package, plus two local css files:

import 'normalize.css/normalize.css';
import '@/styles/globals.css';
import '@/styles/common.css';

Looking inside of the layout.css file, I see the files are ordered as follows:
globals.css > common.css > normalize.css.

For some reason normalize.css is always ordered after the other two files, even though I have that import first. If I play around with the order of globals.css and common.css, it does change the relative order between them, but normalize.css is always placed after them regardless of import order.

(On top of that, I have component module css also being loaded before all of these global styles too-- also a problem.)

To keep it simple though, I think the basic question is how can I force my normalize.css to be the first styles on the page?

halcyon lindenBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

young stream
#

After some digging, it seems that if a client component is included directly in the layout, it causes all of the css in the layout.css file to be ordered apparently by random.

I've worked around it by removing all client components to an intermediate component that's used by the page.tsx files, not layout.tsx.

This means any client component css will be in page.css and not the layout.css. The page.css will still be ordered randomly, but I only have css modules in there which makes it less of an issue.This leaves a lot to be desired since layouts can't really be taken advantage of, and reduces some effectiveness of the code splitting.