CODEWITHSUNDEEP
next.jspostcss
Ahmed Hakim
Ahmed Hakim

Reputation: 113

How to load seprate css file for each page in Next.js with postcss

I'm trying to use PostCss with next.js which allow me only to add the main css file in the main _app.js file, which make all the output style global,
how can I create css file for each page or even each component

Upvotes: 3

Views: 3132

Answers (1)

felixmosh
felixmosh

Reputation: 35573

As of Next.js version 9.2, it supports native css support.

As you said, if you import styles from _app.js file, they considered as global styles of your app.

Styles of components are considered "modules".

CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.

All you need to do is call your css files with *.module.css suffix.

Check the official docs

Upvotes: 0

Related Questions