问题描述
在一个新的 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');
完成了这项工作。