ДАЛЕЕ. js - Глобально импортированные стили на пользовательской странице _app. js не работают при рендеринге на стороне сервера - PullRequest
Новая
       13

ДАЛЕЕ. js - Глобально импортированные стили на пользовательской странице _app. js не работают при рендеринге на стороне сервера

0 голосов
/ 17 июня 2020

Когда стили глобально импортируются в _app. js (как говорится в документации Next js ) и выполняется загрузка первой страницы, ответ на стороне сервера приходит без стилей.

Я использовал этот репозиторий и изменил его, чтобы можно было использовать новую функцию Next js, Built-In CSS Support.

В порядке для Next js чтобы перенять стили, я удалил устаревшие зависимости next-compose-plugins, next-fonts и next-images и удалил файл next.config.js.

Для воспроизведения 

git clone https://github.com/turrione/nextjs-mdbreact.git
yarn install
yarn dev

Обратите внимание, что при выполнении запроса предварительный просмотр ответа не оформлен.

Предварительный просмотр ответа без стиля

Единственный способ исправить ошибку - это добавить стили непосредственно в компоненте Head в next-head 

import Head from 'next/head';
import { MDBContainer } from 'mdbreact';
import NavBar from './NavBar';
import Footer from './Footer';

function Layout(props) {
  return (
    <>
      <Head>
        {/* HARDCODING STYLES */}
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.0/css/mdb.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
      </Head>
      <NavBar />
      <MDBContainer>{props.children}</MDBContainer>
      <Footer />
      <style jsx global>{`
        #__next {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      `}</style>
    </>
  );
}

export default Layout;

Теперь вы можете увидеть, как ответ на стороне сервера поставляется со стилями.

Есть ли способ импортировать файлы css в custom _app. js файл (как сказано в документации Next js) и стилизовать d страниц со стороны сервера?

Предварительный просмотр ответа в стиле

...