我的React应用程序运行良好,还使用了全局CSS.

我跑了npm i next-images,添加了一张图片,编辑了next.config.jsran 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} />
}

推荐答案

使用内置的Next.js CSS加载器(见here)

  1. @zeit/next-sass包替换为sass包.
  2. 移除next.config.js个.或者不要在其中更改CSS加载.
  3. 按照错误消息中的建议移动全局CSS.

从明年开始.js 9.2全局CSS必须在Custom <App>组件中导入.

// pages/_app.js

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

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

要仅将样式添加到specific component or page,可以使用内置的CSS modules.支持(请参见here)

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

Reactjs相关问答推荐

react-hook-form问题:为什么getValues不返回大多数当前值?

Reaction-Query&-使用Mutation触发成功,而应该触发错误

Reaction路由DOM v6不包含上下文(Supabase)

如何使用 React 获取表单中的所有值?

如何管理组件列表的复杂状态? (Nextjs/ReactJS)

字段是必需的,当它没有定义时

如何测试使用 React.createportal 呈现的组件?

将 clerk 与 supabase 集成的最佳实践

Select 项目后 Select HeadlessUI 组合框中的所有文本?

Material UI v5.11 - Prop sx 在响应式中写了两次

将 ref 转发到所有页面(路由组件)只是为了将其应用于
并具有跳过导航链接(按钮).有没有更好的办法?

单元测试 useLoaderData() react-router v6 加载器函数

Cypress ,重试不再附加到 DOM 的元素

从 API 中提取映射数组后出现重复元素

调用 Jest 和服务方法的问题

将 Material UI 菜单渲染为

当页面重新加载react 路由导航到第一页 v6

在 Redux 中更新布尔状态时出错

运行开发服务器时如何为 Vite 指定运行时目录

useEffect 仅在跟随链接后有效,不适用于直接链接