Why Can't I Import Global CSS from Files Other Than `pages/_app.js` in Next.js 9.2 ?

Why "Global CSS cannot be Imported from Files Other than your Custom "?

Next.js version 9.2 introduces a revamp in the way global CSS is handled. Prior to this release, global CSS could be imported from any module. However, this practice resulted in challenges in customizing themes and managing styles.

Solution:

To address this issue, Next.js now requires that all global CSS imports be moved to the pages/_app.js file. This allows developers to centralize and control the global styles without scattering them across multiple files.

Steps to Resolve the Error:

1. Remove Legacy Sass Loader: Replace the @zeit/next-sass package with sass.
2. Remove next.config.js Configuration: Remove the CSS configuration from next.config.js to rely on the built-in CSS loader.
3. Move Global CSS to pages/_app.js: Import the global CSS in the pages/_app.js file, as shown in the answer example.

Note: If you need to add styles to specific components or pages, you can utilize the built-in CSS modules feature. This allows you to create scoped styles that are only applied to the specific components or pages where they are imported.

Additional Information:

• [Next.js CSS Loader](https://nextjs.org/docs/advanced-features/customizing-css)
• [CSS Modules in Next.js](https://nextjs.org/learn/basics/css/modules)

The above is the detailed content of Why Can't I Import Global CSS from Files Other Than `pages/_app.js` in Next.js 9.2 ?. For more information, please follow other related articles on the PHP Chinese website!