Webpack 模块解析失败：Angular 和 Swiper 出现意外字符“@”

Question

我目前正在开发一个 ionic（角度）项目，并尝试包含用于滑动元素的 Swiper（版本 11.1.0）。但是，我遇到了以下编译错误：

./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 节点：18.18.0 包管理器：npm 9.8.1 操作系统：win32 x64 角度：17.3.3 各种 Angular 包及其各自的版本 rxjs：7.8.1 打字稿：5.2.2 区域.js：0.14.4 @Angular-devkit/build-Angular：17.2.3

我确实花了几个晚上的时间来解决这个问题，但没有解决。

我尝试添加

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

Answer 1

您不必加载 Swiper 版本 >= 9.0.0 的任何样式。您只需在打字稿代码中使用

register

函数，如文档中所述。

// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
register();

由于它是一个 Web 组件，因此它在其 shadow-root 内部自行处理其样式。
您可以尝试这个最小的 stackblitz 示例： https://stackblitz.com/edit/stackblitz-starters-hehfax?file=src%2Fmain.ts

package.json

{
  [...]
  "dependencies": {
    [...]
    "swiper": "^11.1.0"
    [...]
  },
  [...]
}

main.js

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { register } from 'swiper/element/bundle';

import 'zone.js';

register();

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <swiper-container>
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper-container>
  `,
  styles: `
    swiper-container {
      width: 200px;
    }
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

其实就是：

1. 通过

   swiper

   安装

   npm

   作为依赖项。
2. 从

   register

   导入

   swiper/element/bundle

   函数。
3. execute

   register

   函数（请确保只执行一次，所以不要将其放入可能多次使用的组件的构造函数中）
4. 添加

   schemas: [CUSTOM_ELEMENTS_SCHEMA]

   ，角度编译器不会抱怨自定义元素。
5. 使用

   swiper-container

   和

   swiper-slide

   标签创建滑动器。