how do i import pure css files into nextjs 13 app

[grim ivy]

Hi @haughty frost. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, you can import CSS files into your application in a few different ways. Here are some methods based on the information provided in the extracts:

1. Importing CSS files from a JavaScript file: Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript. source (https://nextjs.org/docs/pages/building-your-application/styling/css-modules)

2. Using CSS Modules: Next.js has built-in support for CSS Modules using the .module.css extension. CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions. CSS Modules can be imported into any file inside the app directory. source (https://nextjs.org/docs/app/building-your-application/styling/css-modules)

Example:

import styles from './styles.module.css'
 
export default function DashboardLayout({
 children,
}: {
 children: React.ReactNode
}) {
 return <section className={styles.dashboard}>{children}</section>
}

3. Importing styles from node_modules: Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application. For global stylesheets, like bootstrap or nprogress, you should import the file inside pages/_app.js. source (https://nextjs.org/docs/pages/building-your-application/styling/css-modules)

Example:

import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />
}

4. Adding a global stylesheet: To add a stylesheet to your application, import the CSS file within pages/_app.js. These styles will apply to all pages and components in your application. Due to the global nature of stylesheets, and to avoid conflicts, you may only import them inside pages/_app.js. source (https://nextjs.org/docs/pages/building-your-application/styling/css-modules)

Example:

import '../styles.css'
 
export default function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />
}

Remember, CSS Modules are an optional feature and are only enabled for files with the .module.css extension. Regular <link> stylesheets and global CSS files are still supported. In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: