为什么 Bootstrap Js 在我的模板中不起作用？

Question

这是一个关于它如何工作的问题，而不是关于如何修复它的问题。我真的很想明白这一点。

所以我正在做一个 VueJS/Symfony 项目。我想做的一件事就是使用 bootstrap js 组件，例如 collapse。

我在我的应用程序中导入 bootstrap 并检查它是否导入到我的文件中。

//app.js
import $ from 'jquery'
window.$ = window.jQuery = $
import 'bootstrap'

if (typeof $.fn.popover == 'function') {
    alert('yolo') //works
}

//My view
{% block javascript %}
    {{ parent() }}
    <script>
        if (typeof $.fn.popover == 'function') {
            alert('yolo') //works
        }
    </script>
{% endblock %}

然而，这还不足以让它像我希望的那样工作。例如属性相关的方法将不起作用

<!-- This does not work -->
<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

通过稍微搜索，我发现有一个 library（由于重构工作太多，我无法使用）正在执行此操作。有具体原因吗？

它是如何工作的？是因为 webpack loader 吗？（我正在使用 Webpack Encore）

Answer 1

我认为您很可能忘记包含所有 css 组件，因为您的控制台似乎没有任何错误。

你确定你也导入了 CSS 文件吗？

@import "~bootstrap/scss/xxx";

如果您使用 SCSS 例如

为什么 Bootstrap Js 在我的模板中不起作用？

Why is Bootstrap Js not working in my template?

javascript

symfony

twitter-bootstrap

vue.js

webpack-encore