Nextjs项目使用Swiper提示找不到./swiper.scss报错如何解决

报错信息Module not found: Package path ./swiper.scss is not exported from package的根本原因为：Swiper 7重构了包的导出规则，在package.json中新增exports字段限制了可引入的路径，旧版本通用的根路径./swiper.scss不在默认导出列表中，同时Next.js 11对package exports的适配存在兼容问题，最终触发引入失败。

可根据项目需求选择以下任意一种方案解决：

• 方案1：修改引入路径（优先推荐）
  将原有引入语句
  import 'swiper/swiper.scss'
  替换为Swiper 7官方指定的scss引入路径：
  import 'swiper/scss'
  如果用到了Swiper的扩展模块样式（如分页器、导航按钮等），对应修改路径即可，示例：
  import 'swiper/scss/navigation'
import 'swiper/scss/pagination'
• 方案2：配置Next.js别名兼容旧写法
  如果项目内有多处旧路径引入不想逐一修改，可以在next.config.js中配置路径别名映射：
  首先顶部引入path模块：
  const path = require('path')
  然后添加webpack配置项：

module.exports = {
  // 其他现有配置保留
  webpack: (config) => {
    config.resolve.alias['swiper/swiper.scss'] = path.resolve(__dirname, 'node_modules/swiper/swiper.scss')
    // 如果有其他模块样式的旧引入，也可以按上述规则添加对应别名
    return config
  }
}

• 方案3：直接使用预编译CSS（无自定义scss变量需求时推荐）
  如果不需要通过scss变量修改Swiper的默认样式，直接引入官方预编译好的css文件即可，不需要经过scss编译，性能更高：
  import 'swiper/css'
  对应扩展模块样式引入示例：
  import 'swiper/css/navigation'
import 'swiper/css/pagination'

内容的提问来源于stack exchange，提问作者조성재