无法从自定义<App>以外的文件导入Next.js Global CSS

我的React App运行良好，也使用了全局CSS。

我运行npm i next-images，添加图像，编辑了next.config.js，，ran npm run dev现在我收到了此消息

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

我已经检查了文档，但是由于我是React的新手，所以我发现其中的说明有些混乱。

另外，为什么现在会发生此错误？您是否认为它与npm安装有关？

我试图删除添加的新文件及其代码，但这不能解决问题。我还尝试了阅读更多内容的建议。

我的最高层组件。

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;

我的next.config.js

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

我的main.scss文件

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

我的global.scss

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

我发现最奇怪的是，此错误是在没有更改任何与CSS或Layout.js有关的情况下发生的，并且以前可以正常工作吗？

我已经将main.scss导入移动到pages / _app.js页面，但是样式仍然没有通过。这就是_app.js页面的外观

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

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

第4122篇《无法从自定义以外的文件导入Next.js Global CSS》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>