How to use style css files in Next.js?

Question

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) {
 ...
}

Wanuja Ranasinghe · Accepted Answer · 2023-01-09 10:51:20Z

0

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

answered Jan 9, 2023 at 10:51

Wanuja Ranasinghe

579 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike 'Pomax' Kamermans · Accepted Answer · 2024-08-03 17:53:28Z

Next.js annoyingly doesn't honour the concept of "static content is static content", but for CSS you can still work with normal CSS files in their own dir without using the whole "CSS modules" inside JavaScript source code nonsense:

Create globals.css if it doesn't exist in your app dir.
Add import "globals.css" to your global page.tsx if you don't already have it there.

(both of these will already be the case if you made next create your project dir)

Create a folder for your .css file(s) if you don't have one already.
Add a bog-standard CSS @import url(...) to globals.css for your file(s).
You're done.

Now it's just normal regular web stack work: write the CSS you want, especially now that we don't need SASS anymore because plain CSS has supported CSS variables since 2018, and finally added support for nested rules in late 2023.

(And to keep things sensible, you probably want your own master file, e.g. style.css, so that you only need a single import in globals.css and then never touch or even look at that file ever again. Then if your own styles are split up into multiple files, add @import statements in your own master file the way you're used to from working with the regular web stack)

eyadevv · Accepted Answer · 2023-01-09 10:50:12Z

-2

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

answered Jan 9, 2023 at 10:50

eyadevv

132 bronze badges

1 Comment

Mike 'Pomax' Kamermans Over a year ago

This isn't actually true. You don't need CSS modules at all, if you want to use normal stylesheets all you have to do is make sure those get loaded by the global.css file using the bog standard CSS @import url(...) statement.

Collectives™ on Stack Overflow

How to use style css files in Next.js?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related