Swiper 6.8.4版本导入css样式提示无法解析模块路径如何解决？

1. 替换为Swiper 6.x版本适配的导入路径 #

Swiper v7及以上版本才支持swiper/css格式的样式导入路径，你使用的6.8.4属于v6版本，路径结构不同，且你的项目支持less，可直接引入swiper自带的less源文件，替换原有导入语句为：

// 核心样式
import "swiper/swiper.less";
// 导航模块样式
import "swiper/components/navigation/navigation.less";
// 分页模块样式
import "swiper/components/pagination/pagination.less";

如果不想用less，也可以引入编译后的css文件：

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

2. 解决ESLint报红问题 #

如果修改路径后编译正常，仅ESLint提示Unable to resolve path to module，说明ESLint未配置识别样式文件扩展名的规则，在你的项目.eslintrc.js（或其他ESLint配置文件）中新增如下配置即可：

module.exports = {
  // 保留你原有其他配置不变
  settings: {
    "import/resolver": {
      node: {
        // 新增less、css到可识别扩展名列表
        extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
      }
    }
  }
}

3. 可选校验操作 #

如果修改后仍报错，可先校验本地安装的swiper版本是否正确，执行命令：
npm list swiper
如果版本不是6.8.4，重新安装对应版本即可：
npm install swiper@6.8.4

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