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 ?
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 withsass
. 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 componentButton.js
you can create a Sass filebutton.module.scss
and include it in the component. Now, Your error Must be solved.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 withsass
. 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 componentButton.js
you can create a Sass filebutton.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