Ionic/Angular项目中无法导入Swiper SCSS的求助

问题分析 #

你遇到的SassError: Can't find stylesheet to import错误，核心原因是Swiper版本与Ionic文档指引不匹配。新版Swiper（v8+）调整了资源文件的目录结构，旧的~swiper/scss导入路径已经失效；而keyboard文件夹为空大概率是安装过程中缓存或网络问题导致的包不完整。

解决方案 #

1. 修正SCSS导入路径 #

删除global.scss中的旧导入语句，替换为新版Swiper的正确路径：

// 基础样式（必选）
@import 'swiper/css';

// 如果需要自定义动画效果，按需导入对应的模块样式，比如立方体切换效果
@import 'swiper/css/effect-cube';
@import 'swiper/css/effect-fade';

注意：新版Swiper不再使用~前缀，直接用包名+资源路径即可。

2. 修复不完整的Swiper安装 #

彻底清理缓存并重新安装，解决keyboard文件夹为空的问题：

# 清除npm缓存
npm cache clean --force

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json

# 重新安装Swiper
npm install swiper

3. 匹配Ionic组件版本 #

如果你的Ionic版本较旧，建议确认@ionic/angular与Swiper的兼容性：

• Ionic 6+通常适配Swiper 8+
• 若使用Ionic 5及以下，可指定安装Swiper 7.x版本：npm install swiper@7，此时导入路径可使用@import '~swiper/swiper.scss';

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