Next.js Discord

Discord Forum

CSS not working in production build

Answered
Sloth bear posted this in #help-forum
Open in Discord
Sloth bearOP
I have a Next server that loads CSS normally on dev server, but doesn't send the tailwind generated CSS file on production (btw, the CSS file does exist in /_next/static but it's just not sent to the browser.

Can you please help me debug this?
Note: for some reason a different CSS is sent to the browser, it contains info on the font used by the project.
Answered by Sloth bear
So sorry for the late reply! I eventually found out that I was importing the CSS file into app/layout.tsx like this:
import "../styles/globals.css";

All I had to do is switch it to:
import "@/styles/globals.css";

And it worked!

It probably should've gave me a warning at least that what I was doing would not work in the production server lol
View full answer

6 Replies

@"use php" what hosting platform are you using?
Sloth bearOP
I'm hosting the application locally on a node.js server
"use php"
Try using live server
@Sloth bear I'm hosting the application locally on a node.js server
"use php"
If you’re opening file path, css won’t work. So you need to use live server
"use php"
Please ping me when you reply.
@"use php" If you’re opening file path, css won’t work. So you need to use live server
Sloth bearOP
So sorry for the late reply! I eventually found out that I was importing the CSS file into app/layout.tsx like this:
import "../styles/globals.css";

All I had to do is switch it to:
import "@/styles/globals.css";

And it worked!

It probably should've gave me a warning at least that what I was doing would not work in the production server lol
Answer