close
Global CSS cannot be imported from files other than your Custom , Global CSS cannot be imported from files, CSS cannot be imported from files other than your Custom , Global CSS cannot be imported from files other than your Custom, CSS cannot be imported from files other than your Custom App

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

by

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.

Contents
  1. How Global CSS cannot be imported from files other than your Custom <App> Error Occurs ?
  2. How To Solve Global CSS cannot be imported from files other than your Custom <App> Error ?
  3. Solution 1: global CSS must be imported in Custom <App>
  4. Summary

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

Leave a Comment