close

[Solved] Global CSS cannot be imported from files other than your Custom

Hello Guys, How are you all? Hope You all Are Fine. Today I am just added next-images and Now I am facing following error Global CSS cannot be imported from files other than your Custom <App> in Reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Global CSS cannot be imported from files other than your Custom <App> Error Occurs ?

I am just added next-images and Now I am facing following error.

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to all_screen/_app.js.

How To Solve Global CSS cannot be imported from files other than your Custom <App> Error ?

  1. How To Solve Global CSS cannot be imported from files other than your Custom Error ?

    To Solve Global CSS cannot be imported from files other than your Custom <App> Error If You are using Global CSS then global CSS must be imported in Custom <App>. So that First of all Just Replace @zeit/next-sass package with sass. Then, Remove next.config.js. Or do not change CSS loading in it. Now, Import custom CSS in Custom <App> component. And , if you have a component Button.js you can create a Sass file button.module.scss and include it in the component. Now, Your error Must be solved.

  2. Global CSS cannot be imported from files other than your Custom

    To Solve Global CSS cannot be imported from files other than your Custom <App> Error If You are using Global CSS then global CSS must be imported in Custom <App>. So that First of all Just Replace @zeit/next-sass package with sass. Then, Remove next.config.js. Or do not change CSS loading in it. Now, Import custom CSS in Custom <App> component. And , if you have a component Button.js you can create a Sass file button.module.scss and include it in the component. Now, Your error Must be solved.

Solution 1: global CSS must be imported in Custom <App>

If You are using Global CSS then global CSS must be imported in Custom <App>. So that First of all Just Replace @zeit/next-sass package with sass. Then, Remove next.config.js. Or do not change CSS loading in it. Now, Import custom CSS in Custom <App> component. And , if you have a component Button.js you can create a Sass file button.module.scss and include it in the component. Just Like This

// your_page/_app.js

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

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

Now, Your error Must be solved.

Summary

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

Please Rate Our Solution to Motivate Us For Give Our Best

Leave a Comment