节点模块和全局 CSS 的问题 - nextjs

我正在将创建反应应用程序中制作的项目迁移到 nextjs,我遇到了这个问题

./node_modules/react-bootstrap-submenu/src/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modulesreact-bootstrap-submenudistDropdownSubmenu.js

有谁知道如何解决这个问题?

stack overflow Problem with node modules and Global CSS - nextjs
原文答案

答案:

作者头像

Document

从 Next.js 9.5.4 开始,允许在应用程序的任何位置从 node_modules 导入 CSS 文件。

对于全局样式表,如 bootstrap 或 nprogress,您应该在 pages/_app.js 中导入文件。例如:

// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'

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

如果此解决方案不适合您,请考虑以下解决方案。

  1. 将 css 文件复制到 public/static
    2.然后

    
    // pages/_app.js
    import 'public/static/bootstrap.css'