How to properly include css files in reactjs / nextjs?

Question

React

Good afternoon.

I use nextjs for development. Out of the box uses module.css. I didn't want to use it. work landing layout with it is not very convenient for me. Looking for solutions on how to get rid of it.

I found a solution to connect styles globally. Do I understand correctly that if I connect all styles globally, then when I build the project, I will get one css file with styles, and if I use module.css and connect styles to each component, then when building, the styles will be used for each page depending on connection?

PS If anyone knows some ways to work with next without module.css, please tell me.

Answer 1

When building, React collects all module.css (css) and js (jsx, ts, tsx) into a heap, roughly speaking, it turns out one js and one css).
Globally, styles in React can be included in index.js at the very top by type:

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

In Next (I just started learning it myself), you can include it in a similar way in the _app.js file.
Module.css avoids duplication of classes, it substitutes a unique id at the end, so you can use the same naming in all module.css files without fear that they may coincide with others and there will be a style conflict.
I am currently using scss and module.scss in NextJS