Migration to App Router: CSS is not loaded as expected
Unanswered
Pekingese posted this in #help-forum
PekingeseOP
Hey there!
I just finished the migration of my app from pages router to app router. So far everything works functionally fine but I have an issue with the styles.
In the App I use components from an external React based library. The components are styled with Tailwind but there are some additional settings as a specific font, other shades of red and some stuff. In my App I'm using Tailwind as well. Therefore I imported Tailwind in my global CSS and my global CSS in the layout.tsx file. Underneath my global CSS I import the CSS of the external library in the layout.tsx.
My globals.css looks like this
My layout.tsx looks like this
Since the migration the additional settings of the external library aren't shown in the frontend anymore. They are shown locally, but not when I rollout my changes to the server. I checked the network tab, there are now two CSS loaded (before migration there was only one). In the first loaded CSS I can find the additional settings and Tailwind configs. In the second one there is additional stuff from my CSS and again the Tailwind configs, wich overrides the additional settings from the external frontend library. Also there is no request on the specific font which is defined in the external library. Maybe that is "ok" as the second CSS is overriding the settings.
Had anyone experienced something like that before? Is there maybe a way to prevent the css from splitting up?
I will add a few things I tried to fix this issue but everything was unsuccessful so far.
I just finished the migration of my app from pages router to app router. So far everything works functionally fine but I have an issue with the styles.
In the App I use components from an external React based library. The components are styled with Tailwind but there are some additional settings as a specific font, other shades of red and some stuff. In my App I'm using Tailwind as well. Therefore I imported Tailwind in my global CSS and my global CSS in the layout.tsx file. Underneath my global CSS I import the CSS of the external library in the layout.tsx.
My globals.css looks like this
@tailwind base;
@tailwind components;
@tailwind utilities;My layout.tsx looks like this
import '../styles/globals.css'
import 'externalLib/dist/index.css'Since the migration the additional settings of the external library aren't shown in the frontend anymore. They are shown locally, but not when I rollout my changes to the server. I checked the network tab, there are now two CSS loaded (before migration there was only one). In the first loaded CSS I can find the additional settings and Tailwind configs. In the second one there is additional stuff from my CSS and again the Tailwind configs, wich overrides the additional settings from the external frontend library. Also there is no request on the specific font which is defined in the external library. Maybe that is "ok" as the second CSS is overriding the settings.
Had anyone experienced something like that before? Is there maybe a way to prevent the css from splitting up?
I will add a few things I tried to fix this issue but everything was unsuccessful so far.
4 Replies
PekingeseOP
I tried to fix this by import all CSS at the same place. I therefore created an separat CSS file with only the Tailwind stuff inside.
First I imported all CSS files in my globals.css, first the Tailwind stuff, than the external CSS. In layout.tsx I deleted the import of the external library. I played with the order of the imports, as I have some other CSS files imported too. But nothing worked.
My globals.css looked like this:
My layout.tsx looked like this:
Second I tried the other way, import everything in the layout.tsx. Meaning the tailwind.css, my globals.css, the external library. Playes as well with the order but unsuccessfully too.
My globals.css had no imports.
My layout.tsx looked like this:
First I imported all CSS files in my globals.css, first the Tailwind stuff, than the external CSS. In layout.tsx I deleted the import of the external library. I played with the order of the imports, as I have some other CSS files imported too. But nothing worked.
My globals.css looked like this:
@import 'tailwind.css';
@import 'some/stuff.css';
@import '~externalLib/dist/index.css';My layout.tsx looked like this:
import '../styles/globals.css'Second I tried the other way, import everything in the layout.tsx. Meaning the tailwind.css, my globals.css, the external library. Playes as well with the order but unsuccessfully too.
My globals.css had no imports.
My layout.tsx looked like this:
import '../styles/tailwind.css'
import '../some/stuff.css'
import '../styles/globals.css'
import 'externalLib/dist/index.css'PekingeseOP
I had an idea and tested it successfully. As all my content comes from a CMS I only use the slug page. So i set the import of my external library CSS into slug page. This works. I do still have two CSS loading but the external is loaded after the internal CSS.
That's a good way for me, but if I would use multiple pages maybe a bit a hacky way. If there is a better fix I would like to know.
That's a good way for me, but if I would use multiple pages maybe a bit a hacky way. If there is a better fix I would like to know.
PekingeseOP
I hat to revert this change. The frontend looked good on the first sight, but ignored some of my tailwind styling. Also the styling of the external library was not rendered in my CMS, it seems as I have to had it placed in the layout.tsx to work with the CMS.
Has anyone an idea?
Has anyone an idea?
Broad-snouted Caiman
👋 Did you find the solution for this problem? Experiencing the same thing that everything works in dev but once rolled out to production css is missing entirely