无法从“自定义”以外的文件导入Next.js Global CSS

子车超英

2023-03-14

问题内容：

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

问题答案：

使用内置的Next.js CSS加载器，而不是legacy @zeit/next-sass。

用替换@zeit/next-sass软件包sass。
next.config.js将其删除或保留为空配置。

next.config.js

module.exports = {
  /* config options here */
};

按照错误消息中的建议移动全局CSS。

/pages/_app.js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

您以前可能没有此错误，因为Next.js放弃了对文件中的全局CSS的支持，而/pages/_app.js不仅仅是在最新版本中。

要将样式仅添加到特定的组件或页面，可以使用CSS模块的内置支持。

例如，如果您有一个组件，则Button.js可以创建一个Sass文件button.module.scss并将其包含在该组件中。

内置Sass支持

添加组件级CSS

无法从“自定义”以外的文件导入Next.js Global CSS

相关阅读

相关文章

相关问答

相关工具

相关文档