mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
P41T
8e8dd0c8c2
What? This PR updates the dependency "prettier" from version 3.2.5 to version 3.6.2. It also modifies other scripts by using the pnpm run prettier-fix after updating the dependency. Why? This is updated to benefit from the changes and fixes introduced in the newer versions of prettier, from versions 3.3 to 3.6. How? The package has been updated using pnpm install prettier@latest, and the files other than package.json and pnpm-lock.json have been modified using the script pnpm run prettier-fix. This PR does only have formatting changes introduced by the updated dependency This PR is the same as #82719 , with fixes implemented to prevent prettier to modifiy symlink files
56 lines
1.7 KiB
Plaintext
56 lines
1.7 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/app/getting-started/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/app/getting-started/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>
|
|
}
|
|
```
|