mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
74a19b7467
## Summary Remove redundant `#` from [error pages](https://github.com/vercel/next.js/tree/canary/errors). ## Description Follow up #52038 and #72263. Updated [template.txt](https://github.com/vercel/next.js/blob/canary/errors/template.txt) and clarified the header deps. Then rewrite as per the template. ### Improving Documentation - [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide Co-authored-by: Delba de Oliveira <[email protected]>
55 lines
1.8 KiB
Plaintext
55 lines
1.8 KiB
Plaintext
---
|
|
title: 'Global CSS Must Be in Your Custom `<App>`'
|
|
---
|
|
|
|
## Why This Error Occurred
|
|
|
|
An attempt to import Global CSS from a file outside of [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) was made.
|
|
|
|
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.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
There are two possible ways to fix this error:
|
|
|
|
- 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). This will allow you to import the stylesheet and scope the styles to a specific component.
|
|
|
|
### Example
|
|
|
|
Consider the stylesheet named [`styles.css`](/docs/pages/building-your-application/styling/css)
|
|
|
|
```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;
|
|
}
|
|
```
|
|
|
|
**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:
|
|
|
|
```jsx filename="pages/_app.js"
|
|
import '../styles.css'
|
|
|
|
export default function MyApp({ Component, pageProps }) {
|
|
return <Component {...pageProps} />
|
|
}
|
|
```
|
|
|
|
**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>
|
|
}
|
|
```
|