Как правильно подключить css файлы в reactjs / nextjs?

Question

[MRcracker]

Добрый день.

Для разработки использую nextjs. Из коробки использует module.css. Я не хотел его использовать т.к. работа посадка верстки с ним не очень удобная для меня. Искал решения как от него избавиться.

Нашел решение подключить стили глобально. Правильно ли я понимаю, что если я подключу все стили глобально, то при сборке проекта я получу один css файл со стилями, а если я буду использовать module.css и подключать стили в каждый компонент, то при сборке стили будут использоваться для каждой страницы свои в зависимости от подключения?

P.S. Если кто знает какие-то способы работать с next без module.css подскажите, пожалуйста.

Answer 1

[Иван Дербенченко]

React при сборке собирает все module.css (css) и js (jsx,ts,tsx) в кучу, грубо говоря получается один js и один css).
Глобально стили в React можно подключить в index.js в самом верху по типу:

import 'путь/к/файлу/относительно/index.js/foo.css';

В Next (я сам только начал его изучать), можно подключить подобным образом в файле _app.js.
Module.css позволяет избежать дублирования классов, он подставляет в конец уникальный id, таким образом вы во всех файлах module.css можете использовать одинаковый нейминг не опасаясь что они могут совпасть с другими и будет конфликт стилей.
Я сейчас использую scss и module.scss в NextJS

Comments

[MRcracker]

Уточните, пожалуйста, я правильно понимаю, что не важно подключаю я все в _app.js или подключаю все к какому-то определенному компоненту, то при сборке все равно будет один файл?

[Иван Дербенченко]

если вы используете module.css его нужно подключать в конкретном компоненте:

// Foo.jsx
import classes from './foo.module.css'
export const Foo = () =>{
   return (
       <div className={classes.wrapper}>
       // code
       </div>
    )
}

// foo.module.css
.wrapper{
     // code
}

Это будет верно как для React так и для Next.
К сожалению не до конца уверен что Next собирается так же как React, учитывая что там SSR ....
На этот ответ вопрос можно посмотреть в доках, или подождать более опытного пользователя форума))

[MRcracker]

Иван Дербенченко, спасибо за ответ. Про подключение импорта я понял, но не понял как собирается. Модули css вообще не удобны просто для меня тк я привык к бэм и верстку уже по бэм сделал, но вот вопрос стоит ли переделывать или нет т.к. если я локально подключу все, то не ускорит ли это страницу тк к нужной странице нужный css будет подключаться

Answer 2

[MRcracker]

Может быть кому-то пригодится мое решение проблемы:

"В производственной среде все файлы модуля CSS будут автоматически объединены во множество минифицированных файлов и.css файлов с разделением кода . Эти .cssфайлы представляют собой горячие пути выполнения в вашем приложении, обеспечивая загрузку минимального количества CSS для вашего приложения для рисования."
Написано только что