NextJS项目引入react-responsive-carousel后样式不生效问题求助

问题根源 #

你配置中开启了全局cssModules: true，会将所有引入的CSS文件（包括node_modules下的第三方组件样式）都按CSS Modules规则处理，类名会被自动添加hash后缀，但react-responsive-carousel组件内部使用的是原始类名，导致样式无法匹配。

解决方法 #

方案1：调整CSS Modules作用范围（推荐） #

修改next.config.js中的cssModules配置，仅对项目自身的样式文件启用CSS Modules，排除node_modules下的第三方样式：

// 将原来的 cssModules: true 替换为以下逻辑
cssModules: (loaderContext) => {
  // 仅项目内非node_modules的样式文件启用CSS Modules
  return !loaderContext.resourcePath.includes('node_modules')
},

方案2：全局引入第三方样式 #

如果不想修改全局配置，可将react-responsive-carousel的样式文件移动到项目的全局样式目录，在项目入口_app.js中全局引入，避免被CSS Modules处理：

1. 从node_modules/react-responsive-carousel/lib/styles/carousel.min.css复制全部样式到styles/carousel.css
2. 在_app.js中添加引入：

import '../styles/carousel.css'

3. 删除组件内的import 'react-responsive-carousel/lib/styles/carousel.min.css'语句

方案3：移除旧版CSS处理插件 #

如果你使用的是Next.js 9.2及以上版本，框架已经内置原生CSS、CSS Modules、Less的支持，不需要再安装@zeit/next-css、@zeit/next-less这类第三方插件，旧插件和原生配置冲突也会导致样式加载异常，移除插件后使用官方原生配置即可。

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