How would you go about generating a separate css file for each page?

[ghost]

Hello,
I'm a bit clueless on how to get this to work in a more complex project where every page has its own CSS file due to large differences in styling.

I imagine this depends on the setup/tools that are in use. But the standard documentation or the Next.js one is targeted towards having one global CSS file. I'm afraid for the use cause I'm asking about this could still result in a significant amount of unused CSS.

Can somebody share some ideas? How would you go about solving this? The tools in use are not that important.

Edit: What we have is a template for each page that includes sub-templates, which can also include other components, and so on. But this is becoming very specific and I would also be happy with some general approach that I can research further.

I'd appreciate the help.

Thanks,
Valentin