CODEWITHSUNDEEP
htmlreactjsnext.js
Kevin Dave
Kevin Dave

Reputation: 447

Next.js stylesheet is not loaded

I'm using Next.js to build my website. I modify the server using express.js server so I have server.js on my root folder of my project.

When I started the server npm run dev which run node server.js, my home page renders correctly. But when I navigate to some of other page in my website, the css is not loaded. But if I refresh the page, it will load the css and the problem is gone

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({dev})
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  const port = process.env.PORT || 3000

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on port ${port}...`)
  })
})

Here's my server.js file. I think there is no problem with the code. I use @zeit/next-less package for compiling my LESS stylesheet Please help

Thanks

Upvotes: 1

Views: 25418

Answers (3)

Kunal Kalwar
Kunal Kalwar

Reputation: 965

For me after running this command the CSS issue was solved

rm -rf .next

Upvotes: -3

Harsh Boricha
Harsh Boricha

Reputation: 133

For me the issue was that the nextjs wasn't loading the rel=stylesheet link tags. It was only able to load rel=preload link tags. so I did a workaround like this:

document.querySelectorAll("link[rel='preload'][as='style']").forEach(link => link.rel = "stylesheet")

Upvotes: 0

Alireza Zarei
Alireza Zarei

Reputation: 314

Check this out: https://github.com/zeit/next-plugins/issues/282

In short as a workaround:

  1. Create an empty CSS file in /static/ directory.
  2. Import it in _app.js:
import '../static/jank-empty.css';

I hope that it would help.

Upvotes: 2

Related Questions