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，run npm run dev，然后现在我收到这条消息
全局 CSS 不能从自定义 <应用程序> 以外的文件中导入.请将所有全局 CSS 导入移至 pages/_app.js.阅读更多:https://err.sh/next.js/css-global我已经检查了文档，但我发现说明有点混乱，因为我是 React 的新手.
另外，为什么现在会发生这个错误?你觉得跟npm install有关系吗?
我已尝试删除与代码一起添加的新文件，但这并不能解决问题.我也尝试过阅读更多:建议的内容.
我的最高层组件.
从'./Navbar'导入导航栏；从下一个/头"导入头；导入'../global-styles/main.scss';const 布局 = (道具) =>(<div><头><title>比特币观察者</title></头><导航栏/><div className="marginsContainer">{props.children});导出默认布局；
我的 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
body {边距:0；}:全球的 {.marginsContainer {宽度:90%；保证金:自动；}}我觉得最奇怪的是这个错误没有改变任何与 CSS 或 Layout.js 相关的东西，而且它以前是有效的?
我已将 main.scss 导入移至 pages/_app.js 页面，但样式仍未通过.这是_app.js页面的样子
import '../global-styles/main.scss'导出默认函数 MyApp({ Component, props }) {return <Component {...props}/>}使用内置的 Next.js CSS 加载器(参见 这里)而不是传统的 @zeit/next-sass.
- 用
sass替换@zeit/next-sass包. - 删除
next.config.js.或者不要更改其中的 CSS 加载. - 按照错误消息中的建议移动全局 CSS.
由于 Next.js 9.2 全局 CSS 必须在自定义
//pages/_app.js导入'../global-styles/main.scss'导出默认函数 MyApp({ Component, pageProps }) {return <Component {...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-sasspackage withsass. - 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屋！
