How to use style css files in Next.js?-CodePudding

I'm new to Next.js.

Although I declared css files in _app.tsx, some of styles defined in the css files are not working. Some of styles use images imported from 'public/images' and this are not imported neither. Please help me find out what is wrong with this. Do I have to change the folder structure? The version of Next.js is "13.1.1".

Thanks in advance!!

I'm working on a project with below folder structures.

public
- fonts
- images
src
- pages
- styles
  - global.css
  - layout.css

My _app.tsx file looks like

import '@/styles/layout.css';
import '@/styles/common.css';

export default function App({ Component, pageProps }: AppProps) {
 ...
}

CodePudding user response：

Rename your CSS file as layout.module.css. Use .module.css extension in your CSS files. Refer nextjs documentation for further references.

CodePudding user response：

am also new to Nextjs , turned out you can't use regular CSS files, you should use CSS modules.

you need to rename each CSS file 'except global' to end with .module.css instead of .css then you need to import the file in the component you want to style : import styles from 'style/file.module.css'

to style an element create a class in the CSS file: .paragraph{ color:green }

and then use it in the component:

        <p className={styles.paragraph}>I am styled with CSS modules</p>

Ref!

there is a standard CSS framework called Tailwindcss you should try it