我的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} />
}
