The error: “Global CSS cannot be imported from files other than your Custom” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.

The causing of this error

When running npm i next-images, adding an image and adjusting the next.config.js, ran npm run dev, you found the warning message 

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

You wonder which steps is incorrect and it return the error, even you delete new files you have added along with their code, but the error is still appear. Even, you checked the code like:

• next.config.js;
• main.scss file;
• global.scss; 

You moved the main.scss import to the pages/_app.js page, but the styles aren’t coming through. 

Let’s see the below solutions to know why you can not fix it because our suggestions are the best answers for this problem.

How To Solve The Error: “Global CSS cannot be imported from files other than your Custom”?

This is how to fix the “Global CSS cannot be imported from files other than your Custom” problem. 

Solution 1: 

If you’re using global CSS,

• you’ll need to import it into Custom App>.
• Therefore, first and foremost, substitute @zeit/next-sass with sass.
• After that, delete next.config.js.
• Alternatively, let CSS load alone.
• Import custom CSS into the Custom <App> component now.

If you own a Button.js component,

• You may make a Sass file called button.module.scss and
• Add it to the component this way:

// your_page/_app.js

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

export default function MyApp({ Component, pageProps }) {

  return <Component {...pageProps} />

}

Solution 2: Use global css

1. Replace the opinionated NextJs CSS loaders by using the follow global css

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  reactStrictMode: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {

    2, Find and delete NextJS css rules

const cssRulesIdx = config.module.rules.findIndex(r => r.oneOf)
if (cssRulesIdx === -1) {
throw new Error('Could not find NextJS CSS rule to overwrite.')
}
config.module.rules.splice(cssRulesIdx, 1)

   3, Type a simpler rule for global css

  config.plugins.push(
      new MiniCssExtractPlugin({
        experimentalUseImportModule: true,
        filename: 'static/css/[contenthash].css',
        chunkFilename: 'static/css/[contenthash].css',
      })
    )

    config.module.rules.push({
      test: /\.css$/i,
      use: !isServer ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'],
    })
    return config
  },
}

Your problem must now be resolved.

Conclusion

We hope you enjoyed our article about the error. With this knowledge, we know that you can fix your error: “Global CSS cannot be imported from files other than your Custom” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!