Next.js Global CSS cannot be imported from files other than your Custom <App>

Use the built-in Next.js CSS loader (see here)instead of legacy @zeit/next-sass.

1. Replace @zeit/next-sass package with sass.
2. Remove next.config.js. Or do not change CSS loading in it.
3. Move the global CSS as suggested in the error message.

Since Next.js 9.2 global CSS must be imported in Custom <App> component.

// pages/_app.jsimport '../global-styles/main.scss'export default function MyApp({ Component, pageProps }) {  return <Component {...pageProps} />}

To add styles only to a specific component or page you can use built-in support of CSS modules. (see here)

For example, if you have a component Button.js you can create a Sass file button.module.scss and include it in the component.

For me the problem was because I had used two module.exports in my next.config.js file like this

const withPlugins = require('next-compose-plugins')const sass = require('@zeit/next-sass')const css = require('@zeit/next-css')const nextConfig = {    webpack: function(config){    config.module.rules.push({        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,        use: {        loader: 'url-loader',            options: {            limit: 100000,            name: '[name].[ext]'        }}    })    return config    }}module.exports = withPlugins([    [css],    [sass, {        cssModules: true    }]], nextConfig)module.exports = {    env: {        MONGO_URI = 'your uri'    }}

. 1I modified it to change the export module like this.

const nextConfig = {    webpack: function(config){    config.module.rules.push({        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,        use: {        loader: 'url-loader',            options: {            limit: 100000,            name: '[name].[ext]'        }}    })    return config    },    env: {        MONGO_URI: "your uri"    }}

2then I deleted the second module.exports

You can replace the overly opinionated and frankly over-engineered NextJs CSS loaders with your own. Here's a simple one for global css:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {  reactStrictMode: true,  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {    // Find and remove 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)    // Add a simpler rule for global css anywhere.    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  },}