Next.js中node_modules全局CSS导入报错的解决方案咨询

方法1：配置next.config.js转译指定依赖包 #

Next.js 13支持通过transpilePackages配置转译特定node_modules包，以此处理其中的全局CSS导入：

• 新建或修改项目根目录下的next.config.js，写入以下代码：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['some-organization/my-components', 'react-perfect-scrollbar'],
}

module.exports = nextConfig

• 原理：将内部组件库和react-perfect-scrollbar加入转译列表后，Next.js会按项目的CSS规则处理它们的样式导入，绕过全局CSS的限制。

方法2：手动全局导入CSS并忽略依赖内的导入 #

如果转译方案不生效，可以手动接管CSS导入，同时屏蔽依赖包内的原有导入：

1. 在项目的全局样式文件（比如app/globals.css）中添加：

@import 'react-perfect-scrollbar/dist/css/styles.css';

2. 修改next.config.js，用webpack规则忽略内部库对该CSS的导入：

const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /react-perfect-scrollbar\/dist\/css\/styles\.css$/,
      use: 'null-loader',
    })
    return config
  },
}

module.exports = nextConfig

3. 安装依赖的loader：

npm install null-loader --save-dev
# 或者用yarn
yarn add null-loader --dev

• 原理：手动在全局导入样式保证组件可用，同时让webpack忽略依赖内的重复导入，避免触发Next.js的全局CSS限制报错。

方法3：自定义样式替代（备选） #

如果上述方案都不适用，可以自己编写CSS模块或用Tailwind CSS复刻react-perfect-scrollbar的核心样式，然后禁用内部组件中原有的scrollbar样式。这个方法需要自行实现样式，适合样式需求简单的场景。

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