npmreactjs95% confidence\u2191 72

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

Full error message

My React App was working fine, using global CSS also.

I ran npm i next-images, added an image, edited the next.config.js file, ran npm run dev, and now I'm getting this message:

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

Read more: https://err.sh/next.js/css-global

I've checked the docs, but I find the instructions a little confusing as I am new to React.

Also, why would this error happen now? Do you think it has anything to do with the npm install?

I've tried to remove new files I've added along with their code, but this doesn't fix the problem. I've also tried what Read More: suggests.

My highest tier component:

import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';

const Layout = (props) => (
  <div>
    <Head>
      <title>Bitcoin Watcher</title>
    </Head>
    <Navbar />
    <div className="marginsContainer">
      {props.children}
    </div>
  </div>
);

export default Layout;

My next.config.js

// next.config.js
  const withSass = require('@zeit/next-sass')
  module.exports = withSass({
  cssModules: true
})

My main.scss file

@import './fonts.scss';
@import './variables.scss';
@import './global.scss';

my global.scss

body {
  margin: 0;
}
:global {
  .marginsContainer {
    width: 90%;
    margin: auto;
  }
}

The thing I find the weirdest is that this error came without changing anything to do with CSS or Layout.js, and it was previously working.

I've moved my main.scss import to the pages/_app.js page, but the styles still aren't coming through. This is what the _app.js page looks like

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

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

Solutionsource: stackoverflow \u2197

Use the built-in Next.js CSS loader (see here) instead of legacy @zeit/next-sass. Replace @zeit/next-sass package with sass. Remove next.config.js. Or do not change CSS loading in it. 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.js import '../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.

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/e54bc4b094892ada1bf806d71d56c88d2f40bd5e42919cd50979b88b153fe988

hash \u00b7 e54bc4b094892ada1bf806d71d56c88d2f40bd5e42919cd50979b88b153fe988

Next.js Global CSS cannot be imported from files other than your Custom &lt;App&gt;

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