使用 Link 模块的 Next.js 页面未通过 CSS 导入加载文件答案

【问题标题】：Next.js pages using Link module not loading files with CSS import使用 Link 模块的 Next.js 页面未通过 CSS 导入加载文件
【发布时间】：2019-06-05 15:09:14
【问题描述】：

我正在将 next.js (7.0.2) 添加到现有项目中，但无法弄清楚为什么 Link 模块没有加载具有 import 'style.css' 的页面。

我已遵循@zeit/next-css 指令以及Next.js/Express 集成。

我安装了以下软件包

下一个 7.0.2
@zeit/next-css
css-loader@1.0.1
表达 (v4)

next.config.js

    // ./next.config.js file
    const withCSS = require('@zeit/next-css')
    module.exports = withCSS()

index.js

    // ./pages/index.js file
    import Link from 'next/link'
    const Index = () => (
      <div>
        <p>Hello Next.js</p>
        <p>
          <Link href="/test"><a>test</a></Link>
        </p>
      </div>
    )

    export default Index

test.js

    // ./pages/test.js file
    import "../style.css"
    export default () => <div className="example">Hello World!</div>

style.css

    // ./style.css file
      .example {
        font-size: 50px;
      }

预期行为：链接模块将加载带有 CSS 的页面，就像加载任何其他页面一样。

实际行为：除了具有import 'my.css' 的页面外，所有页面都将加载。我可以通过 url 直接加载该页面。

EG-

作品=加载http://localhost:3000/index
Works = loading http://localhost:3000/test（并应用 css）
不起作用 = 加载 http://localhost:3000/index 并单击测试链接。什么都没发生。如果我转到开发人员工具 (Chrome) 上的网络选项卡，我会看到列出的 test.js，并且启动器是 page-loader.js。这之后似乎是一系列 on-demand-entries-ping?page=/ 但不确定是什么意思。

更新：如果我注释掉 import "../style.css" 文件加载（没有 CSS）。因此，似乎服务器端路由的 css 处理中有些东西不适合我的设置。

@Darryl - 这是我的快速初始化文件中的相关 sn-ps。整个文件可以在https://github.com/tagyoureit/nodejs-poolController/blob/6.0-DEV/src/lib/comms/server.js#L33找到（当前迭代）。

  function startServerAsync(type) {
    ...
    const _next = require('next')
    const dev = process.env.NODE_ENV !== 'production'
    ...
    // servers is an object that holds http/https/socketio/mdns and other servers
    // type='http' in current testing
    servers[type].next = _next({ dev }) 
    servers[type].next.prepare()
      .then(() => {
        servers[type].app = express();
        servers[type].server = 
        container.http.createServer(servers[type].app);
        configExpressServer(servers[type].app, express, servers[type].next);
        servers[type].server = servers[type].server.listen(servers[type].port, function () {
        container.logger.verbose('Express Server ' + type + ' listening at port %d', servers[type].port);
        container.io.init(servers[type].server, type)
            resolve('Server ' + type + ' started.');
      });
    }

    // assign static/api routes
    function configExpressServer(app, express, _next) {
      // use next as router
      const handle = _next.getRequestHandler()

      // many app.get / app.use statements
      ...
      // catch all to route through next
      app.get('*', (req, res) => {
        const { parse } = require('url')
        const parsedUrl = parse(req.url, true)
        const { pathname, query } = parsedUrl
        handle(req, res, parsedUrl)
      })
  }

【问题讨论】：

既然你说你也做了 nextjs 自定义服务器 Express，你能提供你的服务器端文件，比如 app.js 或类似的东西吗？还要检查您的开发控制台中是否有错误。我猜这个问题与下一个/路由器有关..
@DarrylR.Norbert - 我添加了相关位。这是相当多的代码，因为我有许多 API 和其他服务器（MDNS/SSDP/等）也同时启动。我也没有在开发控制台或服务器日志中看到任何错误。
我发现这是社区中的一个已知问题，许多人都在努力解决这个问题。 github.com/zeit/next-plugins/issues/282

标签： reactjs next.js css-loader

【解决方案1】：

我也遇到了这个问题，花了更多时间终于找到了解决方案，首先你应该用布局管理你的代码，然后在任何使用布局的页面中你必须添加：import Link From 'next/link ' 只是在导入布局线之后。我希望这能解决你的问题

【讨论】：

奇怪...但似乎有效，我仍会监控并更新。谢谢。