Svelte5 和 Bootstrap5

Question

我最近开始接触 Svelte，非常喜欢它。这是我的第一个带有绑定内容的框架，我很享受用它来处理一些个人项目。

但是，我很难让 bootstrap5 正常工作。现在，我可以从 CDN 导入样式表和 javascript。我还可以在 app.html 中本地加载 js。

但是，我现在希望能够在不按下按钮的情况下打开模式（我实际上并不希望在我的项目中使用这个，但我怀疑它最终会再次出现，所以我一直在尝试将其实现它确实适用于“数据目标”标签和所有内容，我正在尝试从 page.svelte 引用 bootstrap.Modal。

所以当我尝试这样做时遇到以下问题：

尝试使用“
import bootstrap from "$lib/bs5/bootstrap.bundle.min.js"”在脚本顶部的 +page.svelte 中导入库会导致错误，并显示消息“document未定义”。我假设这是因为 js 文件正在尝试引用文档，并且需要使用 svelte onmount 来完成。但我似乎无法找到在 onmount 中导入的方法。
删除 import 语句并在本地加载 js 确实让我引用了我需要的“bootstrap.Modal”，但是 VS Code/typescript 不允许我使用智能感知，并且不断声称存在错误，因为它有没有引用 bootstrap.Modal。诚然，这是可行的，但我假设/希望我缺少一些东西可以使这部分发挥作用。需要明确的是 - 这确实可以正常工作，但没有智能感知，并且文件总是报告错误。

我看到了“sveltestrap”，但这对我来说似乎有点过分了...我只是希望能够使用我在官方引导文档中看到的相同内容，而 sveltestrap 似乎有很多差异。

以前有人有过这样的经验吗？希望能够清除该错误。

Answer 1

在 Svelte 组件中使用 import 语句导入 Bootstrap 包不起作用。您需要做的是使用根页面

<script>

 中的

app.html

 标签导入它。  我会将其放在

<body>

 标签的末尾，但精确定位并不重要。

至于打字。如果您访问 npmjs.com 上的

 的同级包，可以提供打字功能。  安装它，你就会拥有 Intellisense。