2023-07-05 15:11:16 +02:00
---
title: 'Global CSS Must Be in Your Custom `<App>`'
---
## Why This Error Occurred
2024-01-10 19:05:14 +01:00
An attempt to import Global CSS from a file outside of [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) was made.
2023-07-05 15:11:16 +02:00
2024-01-10 19:05:14 +01:00
Global CSS cannot be used in files other than your [custom `_app.js` file](/docs/pages/building-your-application/routing/custom-app) due to ordering problems and side-effects.
2023-07-05 15:11:16 +02:00
## Possible Ways to Fix It
2024-01-10 19:05:14 +01:00
There are two possible ways to fix this error:
2023-07-05 15:11:16 +02:00
2024-01-10 19:05:14 +01:00
- Move all global CSS imports to your [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app).
- If you do not wish your stylesheet to be global, update it to use [CSS Modules](/docs/pages/building-your-application/styling/css-modules). This will allow you to import the stylesheet and scope the styles to a specific component.
2023-07-05 15:11:16 +02:00
#### Example
Consider the stylesheet named [`styles.css`](/docs/pages/building-your-application/styling/css-modules)
```css filename="styles.css"
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
```
2024-01-10 19:05:14 +01:00
**Global CSS**:
Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present. Then import the `styles.css` file:
2023-07-05 15:11:16 +02:00
```jsx filename="pages/_app.js"
import '../styles.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
```
2024-01-10 19:05:14 +01:00
**CSS Modules**:
Rename the `styles.css` file to `styles.module.css`. Then import the file in the component or page where you want to use the styles.
```jsx filename="pages/index.js"
import styles from '../../styles.module.css'
export default function Home() {
return <div className={styles.container}>Hello World</div>
}
```