/
githubmirror
/
next.js
Обзор
Документация
Войти
/
githubmirror
/
next.js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
canary
errors/css-global.mdx
55 строк
2 KB
P41T
Update prettier project dependency from 3.2.5 to 3.6.2 (#82896)
22 авг 2025, 00:05
Не верифицирован
22 авг 2025, 00:05
8e8dd0c
Код
Авторство
О чём код?
--- 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> } ```