如何解决Bootstrap bootstrap.bundle.js 不适用于 Laravel 项目上的按钮下拉菜单
在一个新的 Laravel 项目中,我已经包含了 Bootstrap 5 'npm install bootstrap' 并导入到 /resrouces/sass/app.scss @import "~bootstrap/scss/bootstrap";
- 很好,它有效。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="user_select" data-bs-toggle="dropdown" aria-expanded="false">
Select...
</button>
<ul class="dropdown-menu" aria-labelledby="user_select">
<li><a class="dropdown-item" href="user/1">user 1</a></li>
<li><a class="dropdown-item" href="user/2">user 2</a></li>
</ul>
</div>
非常简单的按钮...
import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.js';
require('Bootstrap');
npm run dev >> ERROR in ./node_modules/Bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/Users/Developer/code/project/node_modules/Bootstrap/dist/js'
@ ./node_modules/Bootstrap/dist/js/bootstrap.js 7:101-121
尝试添加波普尔。
window.Popper = require('@popperjs/core/dist/umd/popper').default;
import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.js';
require('Bootstrap');
npm run dev >> ERROR in ./node_modules/Bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/Users/Developer/code/project/node_modules/Bootstrap/dist/js'
@ ./node_modules/Bootstrap/dist/js/bootstrap.js 7:101-121
如果我这样做,它会成功编译,但下拉菜单仍然不起作用。我确保清除缓存,甚至每次都在隐身窗口中尝试过。
window.Popper = require('@popperjs/core/dist/umd/popper').default;
require('bootstrap/dist/js/bootstrap.bundle.js');
我错过了什么?
解决方法
我不知道这是否是最终的解决方案,但它奏效了。
我运行了指向版本 5.0.0.0-beta2 和 npm install boostrap@next
的 npm run dev
并且它起作用了。
事实证明,我根本不需要指定 window.Popper = require('@popperjs/core/dist/umd/popper').default;
而只是 require('bootstrap/dist/js/bootstrap.bundle.js');
完成了这项工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。