Why Can't I Import Global CSS in Next.js Outside of `pages/_app.js`?

"Global CSS cannot be imported from files other than your Custom ": Understanding and Resolving the Issue

Next.js is a popular framework for building React applications that emphasizes performance and code structure. One of its features is the global CSS feature, which allows you to import CSS files that are globally available throughout your application. However, certain limitations and updates can lead to errors when using this feature.

Recently, users have encountered the error message: "Global CSS cannot be imported from files other than your Custom ." This error indicates that global CSS imports should be moved to the pages/_app.js file. Understanding the reason for this error and applying the correct solution is crucial for successful application development.

Reason for the Error

Next.js 9.2 introduced changes to the way global CSS is handled. Previously, you could import global CSS from any file in your project, including pages, components, and utility files. However, in Next.js 9.2 and later, global CSS must be imported exclusively from the Custom component, which is located in the pages/_app.js file.

Resolving the Issue

To resolve the error, you need to follow three simple steps:

1. Use the built-in Next.js CSS loader: Instead of using the legacy @zeit/next-sass package, switch to using the built-in Next.js CSS loader by installing the "sass" package.
2. Remove next.config.js: You can remove the next.config.js file or ensure that it does not contain any configuration changes related to CSS loading.
3. Move the global CSS: Move your main.scss import statement to the pages/_app.js file, as suggested in the error message.

Example

Here's an example of an updated pages/_app.js file with the global CSS import:

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Additional Information

If you want to add styles only to a specific component or page, you can utilize the built-in support for CSS modules. For example, to add styles to a Button.js component, you can create a Sass file named button.module.scss and import it within the component.

By following the steps outlined above, you can effectively resolve the "Global CSS cannot be imported from files other than your Custom " error and ensure that your Next.js application's global CSS is correctly handled.

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