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

问题

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

I ran npm i next-images, added an image, edited the next.config.js, 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 the 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} />
}

回答1:

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

Replace @zeit/next-sass package with sass.
Remove next.config.js or leave it with an empty configuration.

next.config.js

module.exports = {
  /* config options here */
};

Move the global CSS as suggested in the error message.

/pages/_app.js

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

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

You probably didn't have this error previously because Next.js dropped support of global CSS in files other than /pages/_app.js only in recent versions.

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

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

Built-in Sass support

Adding Component-Level CSS

来源：https://stackoverflow.com/questions/60941853/next-js-global-css-cannot-be-imported-from-files-other-than-your-custom-app

标签

css