除了自定义< App>之外的其他文件，无法导入Next.js Global CSS. [英] Next.js Global CSS cannot be imported from files other than your Custom <App>
问题描述
我的React App运行良好，也使用了全局CSS.
My React App was working fine, using global CSS also.
我运行了npm i next-images，添加了图片，编辑了next.config.js，ran npm run dev，现在我收到了此消息
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
我检查了文档，但是由于我是React的新手，所以我发现其中的说明有些混乱.
I've checked the docs, but I find the instructions a little confusing as I am new to React.
此外，为什么现在会发生此错误?您是否认为与npm安装有关?
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.
我的最高级组件.
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
My next.config.js
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssModules: true
})
我的main.scss文件
My main.scss file
@import './fonts.scss';
@import './variables.scss';
@import './global.scss';
我的global.scss
my global.scss
body {
margin: 0;
}
:global {
.marginsContainer {
width: 90%;
margin: auto;
}
}
我觉得最奇怪的是，此错误是在没有更改任何与CSS或Layout.js有关的情况下发生的，并且以前可以正常工作吗?
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?
我已经将main.scss导入移动到pages/_app.js页面，但是样式仍然没有通过.这就是_app.js页面的样子
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} />
}
推荐答案
使用内置的Next.js CSS加载器代替旧版@zeit/next-sass.
Use the built-in Next.js CSS loader instead of legacy @zeit/next-sass.
- 用
sass替换@zeit/next-sass软件包. - 删除
next.config.js或将其保留为空配置.
- Replace
@zeit/next-sasspackage withsass. - Remove
next.config.jsor leave it with an empty configuration.
next.config.js
next.config.js
module.exports = {
/* config options here */
};
按照错误消息中的建议移动全局CSS.
Move the global CSS as suggested in the error message.
/pages/_app.js
/pages/_app.js
import '../global-styles/main.scss'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
您以前可能没有此错误，因为Next.js仅在最新版本中放弃了对/pages/_app.js以外的文件中的全局CSS的支持.
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.
要将样式仅添加到特定的组件或页面，可以使用CSS模块的内置支持.
例如，如果您有一个组件Button.js，则可以创建一个Sass文件button.module.scss并将其包含在该组件中.
For example, if you have a component Button.js you can create a Sass file button.module.scss and include it in the component.
这篇关于除了自定义< App>之外的其他文件，无法导入Next.js Global CSS.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
