Next.js 全局 CSS 不能从您的自定义 <App> 以外的文件导入. [英] Next.js Global CSS cannot be imported from files other than your Custom <App>
问题描述
我的 React 应用运行良好，还使用了全局 CSS.
我运行了 npm i next-images，添加了一张图片，编辑了 next.config.js，ran npm run dev，然后现在我收到了这条消息
全局 CSS 不能从您的自定义 <App> 以外的文件导入.请将所有全局 CSS 导入移至 pages/_app.js.阅读更多:https://err.sh/next.js/css-global我查看了文档，但我发现说明有点混乱，因为我是 React 新手.
另外，为什么现在会发生这个错误?你认为它与 npm install 有什么关系吗?
我已尝试删除与代码一起添加的新文件，但这并不能解决问题.我也尝试了阅读更多:建议.
我的最高层组件.
从'./Navbar'导入导航栏；从下一个/头"导入头；导入'../global-styles/main.scss'；常量布局=(道具)=>(<头><title>比特币观察者</title></头><导航栏/><div className="marginsContainer">{props.children}</div></div>);导出默认布局；我的 next.config.js
//next.config.jsconst withSass = require('@zeit/next-sass')module.exports = withSass({cssModules: 真})
我的 main.scss 文件
@import './fonts.scss';@import './variables.scss';@import './global.scss';
我的 global.scss
正文{边距:0；}:全球的 {.marginsContainer {宽度:90%；边距:自动；}}
我觉得最奇怪的是，这个错误在没有改变任何与 CSS 或 Layout.js 相关的情况下就出现了，而且它以前可以工作?
我已将 main.scss 导入移至 pages/_app.js 页面，但样式仍未通过.这就是 _app.js 页面的样子
import '../global-styles/main.scss'导出默认函数 MyApp({ Component, props }) {返回 <组件 {...props}/>}
解决方案 使用内置的 Next.js CSS 加载器(参见 这里)而不是旧版 @zeit/next-sass.
- 将
@zeit/next-sass 包替换为 sass. - 删除
next.config.js.或者不要更改其中的 CSS 加载. - 按照错误消息中的建议移动全局 CSS.
从 Next.js 9.2 开始，必须在自定义 <App> 组件中导入全局 CSS.
//pages/_app.js导入'../global-styles/main.scss'导出默认函数 MyApp({ Component, pageProps }) {返回 <组件 {...pageProps}/>}
要仅将样式添加到特定组件或页面，您可以使用对CSS 模块的内置支持.(请参阅这里)
例如，如果您有一个组件 Button.js，您可以创建一个 Sass 文件 button.module.scss 并将其包含在组件中.
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} />
}
解决方案 Use the built-in Next.js CSS loader (see here)
instead of legacy @zeit/next-sass.
- Replace
@zeit/next-sass package with sass.
- Remove
next.config.js. Or do not change CSS loading in it.
- Move the global CSS as suggested in the error message.
Since Next.js 9.2 global CSS must be imported in Custom <App> component.
// pages/_app.js
import '../global-styles/main.scss'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
To add styles only to a specific component or page you can use built-in support of CSS modules. (see here)
For example, if you have a component Button.js you can create a Sass file button.module.scss and include it in the component.
这篇关于Next.js 全局 CSS 不能从您的自定义 <App> 以外的文件导入.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
