FOU C: начальная страница загружена без стилей - PullRequest
Новая
       34

FOU C: начальная страница загружена без стилей

1 голос
/ 10 июля 2020

Я пытаюсь применить глобальные стили, импортировав .scss файлы в _app.js для приложения Next js.

Но проблема в том, что стили не применяются предварительно при загрузке страницы . Из-за чего FOU C происходит для всей начальной отрисовки страницы.

Пример 1

Ниже приведена основная c версия проблемы, упомянутой выше:

Структура проекта: 

pages/
    _app.js
    index.js
app.scss
package.json

index. js file: 

export default function Home() {
  return (
    <div className="hello">
      <p>Hello World</p>
    </div>
  );
}

_app. js file: 

import "../app.scss";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

app.s css файл: 

 $color: red;

 .hello {
     background-color: lavender;
     padding: 100px;
     text-align: center;
     transition: 100ms ease-in background;

     &:hover {
         color: $color;
     }
 }

пакет. json файл: 

{
  "name": "basic-css",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^9.4.5-canary.31", // using canary build as per https://github.com/vercel/next.js/issues/11195
    "node-sass": "4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "license": "ISC"
}

Пример 2 ( репо с использованием next-sass )

Согласно третьему пункту @ Ramakay's answer , который создает stati c хешированный css файл и добавляет его в тег <head/>, но проблема не устранена.

Что я ожидаю:

enter image description here

What I'm getting now:

введите описание изображения здесь

Я не использую никакую внешнюю библиотеку, например, "styled-components" и c. И я не ищу его.

Что я могу сделать, чтобы исправить возникшую проблему?

1 Ответ

0 голосов
/ 10 июля 2020

Поскольку это подход CSS в JS, файлы не обрабатываются на стороне сервера для применения предварительным анализатором документов, поэтому ему приходится ждать загрузки Javascript

  1. Вы можете использовать предложение Next js - https://github.com/vercel/styled-jsx - которое будет выводить стили как на стороне клиента, так и на сервере.
  2. Вы можете посмотреть экспорт S CSS отдельно и привязка к заголовку документа.
  3. Next-sass с выводом файла Node-sass - https://github.com/vercel/next-plugins/tree/master/packages/next-sass + https://github.com/sass/node-sass#outfile
...