CSS-разбиение на страницу в Next.js

Question

Мне нужно, чтобы моя таблица стилей CSS была разбита на несколько файлов, по одному на каждую страницу Next.js. Как это реализовать?

Я пытался использовать next-css и просто импортировать css-файл на каждую страницу. Это почти работает. Однако css-файл не загружается при переходе по ссылке. Авторы Next говорят, что это не реализовано: https://github.com/zeit/next-plugins/issues/282#issuecomment-523128645

Я также пытался использовать styled-jsx. У меня есть несколько проблем для меня. На его странице вопросов есть много ошибок. При таком подходе я также не смог сделать стили видимыми во всех дочерних компонентах.

Answer 1

Вы можете создавать свои отдельные файлы CSS, и для каждого компонента, который вам нужен конкретный стиль, вы импортируете файл CSS, который является уникальным для этого компонента. например, скажем, у вас есть Компонент в файле file1.js, тогда вы можете импортировать стили, специфичные для этого компонента в файле file1.css, то же самое происходит для другого файла file2 с помощью css file2.css

import './file1.css'; //importing the style specific only for this component
function File1(){
      const [processing, setProcessing] = useState(false)

    return (
        <> </>
    )
}
export default File1

Аналогично для второго файла

import './file2.css'; //css file specific to this component 
function File2(){
      const [processing, setProcessing] = useState(false)

    return (
        <> </>
    )
}
export default File2