Next.js 样式表未加载

Question

我正在使用 Next.js 来构建我的网站。 我使用 express.js 服务器修改服务器，所以我的项目的根文件夹中有server.js 。

当我启动运行node server.js的服务器npm run dev ，我的主页呈现正确。 但是当我导航到我网站上的其他一些页面时，没有加载 css。 但是如果我刷新页面，它会加载 css 并且问题消失了

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}...`)
  })
})

这是我的server.js文件。 我认为代码没有问题。 我使用@zeit/next-less 包来编译我的 LESS 样式表 请帮忙

谢谢

Answer 1

检查一下： https : //github.com/zeit/next-plugins/issues/282

简而言之，一种解决方法：

1. 在/ static /目录中创建一个空的CSS文件。
2. 将其导入_app.js：

import '../static/jank-empty.css';

我希望这会有所帮助。

Answer 2

对我来说，问题是 nextjs 没有加载 rel=stylesheet 链接标签。 它只能加载 rel=preload 链接标签。 所以我做了这样的解决方法：

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