Updated the Error message describing the alternative and added styles… (

vercel#14652)

The error message indicates better alternatives and added styles.css sample snippet for good visibility.

![Global_error_msg](https://user-images.githubusercontent.com/38159218/85950309-ac3bc100-b979-11ea-9a8d-4a356cb8007c.JPG)
![CSS-Global](https://user-images.githubusercontent.com/38159218/85950319-b2ca3880-b979-11ea-829a-24335fcfc93d.JPG)

errors/css-global.md

@@ -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'

packages/next/build/webpack/config/blocks/css/messages.ts

@@ -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://nextjs.org/docs/messages/css-global`
 }

test/integration/css/test/index.test.js

@@ -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/)
     })
@@ -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/)
     })
@@ -427,7 +427,7 @@ describe('CSS Support', () => {
       expect(code).not.toBe(0)
       expect(stderr).toContain('Failed to compile')
       expect(stderr).toContain('styles/global.css')
-      expect(stderr).toContain('Please move all global CSS imports')
+      expect(stderr).toContain('Please move all first-party global CSS imports')
       expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
     })
   })

test/integration/scss/test/index.test.js

@@ -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/)
     })
@@ -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/)
     })
@@ -396,7 +396,7 @@ describe('SCSS Support', () => {
       expect(code).not.toBe(0)
       expect(stderr).toContain('Failed to compile')
       expect(stderr).toContain('styles/global.scss')
-      expect(stderr).toContain('Please move all global CSS imports')
+      expect(stderr).toContain('Please move all first-party global CSS imports')
       expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
     })
   })