Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated the Error message describing the alternative and added styles… #14652

Merged
merged 10 commits into from
Jul 25, 2021
Merged

Updated the Error message describing the alternative and added styles… #14652

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
15de087
Updated the Error message describing the alternative and added styles…
Jun 28, 2020
d03c2f6
Update packages/next/build/webpack/config/blocks/css/messages.ts
timneutkens Jan 23, 2021
8c3cc4c
Update errors/css-global.md
timneutkens Jan 23, 2021
dfff30a
Run prettier
timneutkens Jan 23, 2021
b97e1e2
Merge branch 'canary' of github.com:vercel/next.js into brijendravarm…
timneutkens Jan 23, 2021
d0fc093
Update tests
timneutkens Jan 24, 2021
126c32e
Merge branch 'canary' into my-errorMsg-contribution
timneutkens Jan 27, 2021
678a1c7
Merge remote-tracking branch 'upstream/canary' into my-errorMsg-contr…
ijjk Jul 25, 2021
7cbde57
update tests
ijjk Jul 25, 2021
f3fe1d6
Merge remote-tracking branch 'upstream/canary' into my-errorMsg-contr…
ijjk Jul 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion errors/css-global.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,27 @@ Global CSS cannot be used in files other than your [Custom `<App>`](https://next

#### Possible Ways to Fix It

Relocate all Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app).
To avoid conflicts, relocate all first-party Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app).

Or, [update your component to use local CSS (Component-Level CSS) via CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css). This is the preferred approach.

#### Example

Consider the stylesheet named [`styles.css`](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)

```jsx
//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;
}
```

Create a [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app) if not already present. Then [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the [`styles.css` file](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet).

```jsx
// pages/_app.js
import '../styles.css'
Expand Down
2 changes: 1 addition & 1 deletion packages/next/build/webpack/config/blocks/css/messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export function getGlobalImportError(file: string | null) {
'cannot'
)} be imported from files other than your ${chalk.bold(
'Custom <App>'
)}. Please move all global CSS imports to ${chalk.cyan(
)}. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to ${chalk.cyan(
file ? file : 'pages/_app.js'
)}. Or convert the import to Component-Level CSS (CSS Modules).\nRead more: https://err.sh/next.js/css-global`
}
Expand Down
4 changes: 2 additions & 2 deletions test/integration/css/test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@ describe('CSS Support', () => {
expect(stderr).toContain('Failed to compile')
expect(stderr).toContain('styles/global.css')
expect(stderr).toMatch(
/Please move all global CSS imports.*?pages(\/|\\)_app/
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
)
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
})
Expand Down Expand Up @@ -407,7 +407,7 @@ describe('CSS Support', () => {
expect(stderr).toContain('Failed to compile')
expect(stderr).toContain('styles/global.css')
expect(stderr).toMatch(
/Please move all global CSS imports.*?pages(\/|\\)_app/
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
)
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
})
Expand Down
4 changes: 2 additions & 2 deletions test/integration/scss/test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,7 +355,7 @@ describe('SCSS Support', () => {
expect(stderr).toContain('Failed to compile')
expect(stderr).toContain('styles/global.scss')
expect(stderr).toMatch(
/Please move all global CSS imports.*?pages(\/|\\)_app/
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
)
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
})
Expand All @@ -376,7 +376,7 @@ describe('SCSS Support', () => {
expect(stderr).toContain('Failed to compile')
expect(stderr).toContain('styles/global.scss')
expect(stderr).toMatch(
/Please move all global CSS imports.*?pages(\/|\\)_app/
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
)
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
})
Expand Down