Swiper 7.0.6版本提示找不到'swiper/css'模块报错如何解决

解决方案 #

这个报错属于Swiper 7.0.x版本的常见样式路径适配问题，按以下步骤处理即可解决：

• 第一步：替换样式导入路径
  Swiper 7.0.6小版本未完善ES模块样式路径的别名适配，将你代码中的样式导入部分替换为包内绝对路径：

// 替换原来的swiper/css相关导入
import "swiper/swiper-bundle.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";

如果上述路径仍报错，可使用兼容旧版本的路径写法：

import "swiper/swiper.min.css";
import "swiper/components/navigation/navigation.min.css";
import "swiper/components/pagination/pagination.min.css";
import "swiper/components/scrollbar/scrollbar.min.css";

• 第二步：重新安装依赖排查包完整性
  如果替换路径后依然报错，先卸载现有swiper包重新安装对应版本，避免依赖安装损坏：

npm uninstall swiper swiper-react
npm install swiper@7.0.6 swiper-react@7.0.6

• 第三步：构建工具适配
  如果你使用的是低于5.0版本的Create React App，或者webpack版本低于5，需要给构建工具添加swiper路径别名适配。以webpack配置为例：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'swiper/css': 'swiper/swiper-bundle.min.css'
    }
  }
}

未暴漏webpack配置的CRA项目可以用craco配置别名，也可以直接升级到Swiper 7.4及以上的稳定版本，该版本已经完成旧构建工具的兼容处理，不需要额外配置即可使用官方文档的导入写法。

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