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

Question

我正在将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'。我可以直接通过网址加载该页面。

EG-

1. 作品=加载http：// localhost：3000 / index
2. Works =加载http：// localhost：3000 / test（并且应用了CSS）
3. 不起作用=加载http：// localhost：3000 / index并单击测试链接。没发生什么事。如果转到开发人员工具（Chrome）上的“网络”标签，则会看到列出的test.js，发起者是page-loader.js。随后似乎出现了一系列on-demand-entries-ping？page = /，但不确定其含义。

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

@Darryl-这是我明确的初始化文件中的相关片段。可以在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)
      })
  }

Answer 1

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