Ionic Angular集成Swiper 11.1.0遇Webpack解析@字符错误

错误信息 #

./node_modules/swiper/swiper.css:14:0 - Error: Module parse failed: Unexpected character '@' (14:0)
[ng] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[ng] | 
[ng] | /* FONT_START */
[ng] > @font-face {
[ng] |   font-family: 'swiper-icons';
[ng] |   src: url('data:application/font-woff;

环境配置 #

• Angular CLI: 17.3.3
• Node: 18.18.0
• Package Manager: npm 9.8.1
• OS: win32 x64
• Angular: 17.3.3
• rxjs: 7.8.1
• TypeScript: 5.2.2
• zone.js: 0.14.4
• @angular-devkit/build-angular: 17.2.3

已尝试操作 #

在src/global.scss中添加以下代码，问题未解决：

/* In src/global.scss */ @import "~swiper/swiper-bundle.css";

解决方案 #

1. 移除旧导入语句：删除global.scss中带有~前缀的Swiper CSS导入，Angular 17不再支持该前缀引用node_modules资源。
2. 正确导入Swiper样式：在src/global.scss中使用Swiper 11官方推荐的导入方式，按需引入所需样式：

// 基础核心样式
@import "swiper/css";
// 按需添加组件样式（比如导航、分页）
@import "swiper/css/navigation";
@import "swiper/css/pagination";

3. 检查构建配置：打开angular.json，确认styles数组中没有直接引入swiper.css或swiper-bundle.css，避免重复加载导致冲突。
4. 清除缓存并重装依赖：执行以下命令清理缓存和依赖，重新构建项目：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng build

5. 确认Swiper JS导入正确：在组件或模块中正确导入Swiper，若使用Angular封装组件，需导入SwiperModule并在模块中声明：

// 组件中导入核心Swiper类
import { Swiper } from 'swiper';

// 模块中导入Angular封装模块
import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [SwiperModule]
})
export class YourModule { }

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