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

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

我安装了以下软件包

下一个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 = () => (

Hello Next.js

test

)

export default Index

test.js

// ./pages/test.js file

import "../style.css"

export default () =>

Hello World!

style.css

// ./style.css file

.example {

font-size: 50px;

}

预期的行为:链接模块将使用CSS加载页面,就像加载其他页面一样。

实际行为:除具有的页面外,所有页面都将加载import 'my.css'。我可以直接通过网址加载该页面。

EG-

Does NOT work = Load http://localhost:3000/index and click the test link. Nothing happens. If I go to the Network tab on the Developer Tools (Chrome) I see test.js listed and the initiator is page-loader.js. This seems to be followed by a series of on-demand-entries-ping?page=/ but not sure what it means.

Update: If I comment out the import "../style.css" the file loads (without CSS). So it seems there is something in the css processing with server side routing that isn't right with my setup.

@Darryl - here are the relevant snippets from my express initialization file. The entire file can be found (current iteration) at 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)

})

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值