74b159c850
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)
1.6 KiB
1.6 KiB
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
was made.
Global CSS cannot be used in files other than your Custom <App>
due to its side-effects and ordering problems.
Possible Ways to Fix It
To avoid conflicts, relocate all first-party Global CSS imports to your pages/_app.js
file.
Or, update your component to use local CSS (Component-Level CSS) via CSS Modules. This is the preferred approach.
Example
Consider the stylesheet named styles.css
//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 if not already present. Then import
the styles.css
file.
// pages/_app.js
import '../styles.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}