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

Question

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

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

我确实在我的应用程序中导入了 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