Next.js 样式表未加载

Posted 2023-02-22

【中文标题】Next.js 样式表未加载

【英文标题】：Next.js stylesheet is not loaded

【发布时间】：2019-01-26 16:11:17

【问题描述】：

我正在使用 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 样式表 请帮忙

谢谢

【问题讨论】：

检查编译后的css保存在哪里。

文档说编译后的LESS文件编译为.next/static/style.css

我对 express.js 服务器没有任何经验，但如果文件存在于.next/static/style.css 中，那么我认为可能是链接路径不正确。检查 js 文件的地址是否正确。但是您说它无法正确加载到“我网站中的某些其他页面”上。请说明它在哪些页面上不起作用，也许他们的源代码会有所帮助。

奇怪的是，我尝试将网站上传到 docker 和弹性 beanstalk。并且生产版本正确加载 css -,-

那么问题出在哪里？

【参考方案1】：

看看这个：https://github.com/zeit/next-plugins/issues/282

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

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

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

我希望它会有所帮助。

【讨论】：

帮了我大忙，我必须从这里添加 _app.js：nextjs.org/docs/advanced-features/custom-app 然后重新启动开发服务器以便它看到它

【参考方案2】：

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

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