我的React应用程序运行良好,还使用了全局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的安装有关吗?
我试图删除添加的新文件及其代码,但这并不能解决问题.我也try 了阅读更多:的建议.
我最高层的部分.
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;
我的下一个.配置.js
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssModules: true
})
我的主菜.scss文件
@import './fonts.scss';
@import './variables.scss';
@import './global.scss';
我的全球.scss
body {
margin: 0;
}
:global {
.marginsContainer {
width: 90%;
margin: auto;
}
}
我发现最奇怪的是,这个错误没有改变CSS或布局.js,它以前工作过吗?
我把我的主菜搬走了.scss导入到pages/_应用程序.js页面,但样式仍然没有通过.这就是_应用程序的功能.js页面看起来像
import '../global-styles/main.scss'
export default function MyApp({ Component, props }) {
return <Component {...props} />
}