Create React App迁Next.js时node_modules全局CSS导入报错如何解决

Next.js 默认限制全局CSS仅可在项目全局入口文件（App Router对应app/layout.tsx/app/layout.jsx，Pages Router对应pages/_app.tsx/pages/_app.jsx）中导入，不允许node_modules内的第三方依赖自行导入全局CSS，因此触发该报错。

方法1：手动全局导入+依赖补丁（全版本兼容） #

• 第一步：在项目全局入口文件顶部添加CSS导入语句：

  import 'react-bootstrap-submenu/src/index.css'
  

• 第二步：删除依赖内部的CSS导入逻辑：找到node_modules/react-bootstrap-submenu/dist/DropdownSubmenu.js文件中导入index.css的代码行直接删除。如果需要永久生效避免重装依赖后修改失效，可以使用patch-package工具生成补丁：
  1. 安装依赖：npm install patch-package --save-dev
  2. 修改完依赖代码后执行命令生成补丁：npx patch-package react-bootstrap-submenu
  3. 在package.json的scripts字段中添加配置："postinstall": "patch-package"，后续每次安装依赖都会自动应用该补丁。

方法2：配置转译依赖（适用于Next.js 13.1及以上版本） #

直接在next.config.js中添加transpilePackages配置，让Next.js自动处理该依赖内部的CSS导入：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['react-bootstrap-submenu'],
}

module.exports = nextConfig

配置完成后重启开发服务即可生效。

内容的提问来源于stack exchange，提问作者Mpimenta