Add Links to Global CSS Error (#10031)

* Add Links to Global CSS Error * Add Example
vercel · Jan 10, 2020 · fa81a4d · fa81a4d
1 parent b5080f1
commit fa81a4d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/errors/css-global.md b/errors/css-global.md
@@ -0,0 +1,22 @@
+# Global CSS Must Be in Your Custom \<App\>
+
+#### Why This Error Occurred
+
+An attempt to import Global CSS from a file other than [`pages/_app.js`](https://nextjs.org/docs/advanced-features/custom-app) was made.
+
+Global CSS cannot be used in files other than your [Custom `<App>`](https://nextjs.org/docs/advanced-features/custom-app) due to its side-effects and ordering problems.
+
+#### Possible Ways to Fix It
+
+Relocate all Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app).
+
+#### Example
+
+```jsx
+// pages/_app.js
+import '../styles.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
diff --git a/errors/global-css.md b/errors/global-css.md
diff --git a/packages/next/build/webpack/config/blocks/css/messages.ts b/packages/next/build/webpack/config/blocks/css/messages.ts
@@ -7,7 +7,7 @@ export function getGlobalImportError(file: string | null) {
     'Custom <App>'
   )}. Please move all global CSS imports to ${chalk.cyan(
     file ? file : 'pages/_app.js'
-  )}.\nRead more: https://err.sh/next.js/global-css`
+  )}.\nRead more: https://err.sh/next.js/css-global`
 }
 
 export function getGlobalModuleImportError() {