将 Bootstrap 4 JS 导入项目

Posted 2023-03-21

【中文标题】将 Bootstrap 4 JS 导入项目

【英文标题】：Importing Bootstrap 4 JS into project

【发布时间】：2021-12-04 16:48:40

【问题描述】：

我正在尝试将 Bootstraps js 导入我的项目主入口点，但我遇到了一些困难。我确定我拥有所有必需的依赖项（jquery 和 popper.js），当我检查我的捆绑文件时，看起来好像正在导入 js，但例如 Bootstrap Collapse 不起作用。

这是我在 package.json 中的应用依赖项

"dependencies": 
    "bootstrap": "^5.1.3",
    "headroom.js": "^0.12.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "webpack": "^5.58.2"

这是从我的应用程序主入口点导入的内容

import $ from "jquery";
import "popper.js";
import 'bootstrap';

谁能看出我哪里出错了？

【参考方案1】：

看起来你使用的是 Bootstrap 5，但你是通过这个包调用它吗？

cdn.jsdelivr.net/.../bootstrap.bundle.min.js

我问是因为，如果是这样，Popper 包含在该捆绑包中，不需要单独调用。我不记得 Popper 是否影响了 Collapse 功能，它可能会因为元素被显示和隐藏......而我现在唯一能看到的是 Popper 可能会被调用两次并将事情搞砸。