modify global css import error message (#14639)

Fixes #14464
vercel · Jun 30, 2020 · a8d2c1e · a8d2c1e
1 parent ab70107
commit a8d2c1e
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/errors/css-global.md b/errors/css-global.md
@@ -10,6 +10,8 @@ Global CSS cannot be used in files other than your [Custom `<App>`](https://next
 
 Relocate all 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
 
 ```jsx

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/css-global`
+  )}. Or convert the import to Component-Level CSS (CSS Modules).\nRead more: https://err.sh/next.js/css-global`
 }
 
 export function getGlobalModuleImportError() {
-Original file line number
+Diff line change
@@ Expand Up @@
     Relocate all 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
     ```jsx
@@ Expand Down @@