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

【问题标题】：Problem with node modules and Global CSS - nextjs节点模块和全局 CSS 的问题 - nextjs
【发布时间】：2021-12-07 22:49:06
【问题描述】：

我正在将一个在 create react app 中创建的项目迁移到 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_modules\react-bootstrap-submenu\dist\DropdownSubmenu.js

有人知道怎么解决吗？

【问题讨论】：

你可能应该按照 Next.js 的建议去做：“联系维护者并要求他们发布其依赖项的编译版本。”现在看起来 react-bootstrap-submenu 与 Next.js 不兼容

标签： css reactjs next.js

【解决方案1】：

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

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

将css文件复制到public/static。
然后

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

【讨论】：

我尝试这样做，但没有成功。