我正在尝试使用 yarn 包管理器在 Symfony 4 中使用 Bootstrap 4，但不知何故 JavaScript 无法正常工作。我在控制台中没有错误，但是当我尝试触发导航栏折叠按钮时，我不会打开导航栏。
这是我的代码:
app.js
var $ = require('jquery');
require("bootstrap/js/dist/");
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">CRM Fabriek</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}{% endblock %}
<script src="{{ asset('build/js/app.js') }}"></script>
</body>
</html>
我使用yarn run encore dev将js编译到build/js/app.js文件中
最佳答案
通过将此行添加到应用程序的入口点(通常是 index.js 或 app.js)来导入 Bootstrap 的 JavaScript:
import 'bootstrap';
或完整指明路径
import 'bootstrap/dist/js/bootstrap';
或者如果你更喜欢 require()
require('bootstrap/dist/js/bootstrap');
或者，您可以根据需要单独导入插件:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...
https://getbootstrap.com/docs/4.1/getting-started/webpack/#importing-javascript
在 webpack-encore 文档中说你必须在你的 webpack.config.js 文件中添加一个调用 .autoProvidejQuery() 因为 Bootstrap 期望 jQuery 作为一个全局变量可用。
// webpack.config.js
Encore
// ...
.autoProvidejQuery();
http://symfony.com/doc/current/frontend/encore/bootstrap.html#importing-bootstrap-javascript
关于javascript - Bootstrap 4 JavaScript 不工作 Symfony4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50058193/