Страницы Next.js, использующие модуль Link, не загружают файлы с помощью импорта CSS - PullRequest
Новая
       56

Страницы Next.js, использующие модуль Link, не загружают файлы с помощью импорта CSS

0 голосов
/ 10 января 2019

Я добавляю 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;
      }

Ожидаемое поведение: модуль Link будет загружать страницы с помощью CSS, как и любая другая страница.

Фактическое поведение: все страницы будут загружаться за исключением той, которая имеет import 'my.css'. Я могу загрузить эту страницу напрямую через URL.

EG -

  1. Работает = загрузка http://localhost:3000/index
  2. Работает = загрузка http://localhost:3000/test (и css прилагается)
  3. НЕ работает = Загрузить http://localhost:3000/index и нажать на тестовую ссылку. Ничего не произошло. Если я перехожу на вкладку Сеть в Инструментах разработчика (Chrome), я вижу test.js в списке и инициатором является page-loader.js. Похоже, что за этим следует серия ping по запросу-записи-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)
      })
  }

1 Ответ

0 голосов
/ 14 мая 2019

У меня тоже была эта проблема, потратив гораздо больше времени, наконец, я нашел решение, сначала вы должны управлять своим кодом с помощью макетов, а затем на любых страницах, которые используют макеты, которые вы должны добавить: импортировать ссылку из следующего / ссылка 'После импорта строки макета. я надеюсь, что это решит вашу проблему

...