Question

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

所以我正在研究VueJS / Symfony项目。我想做的一件事就是使用collapse之类的引导js组件作为示例。

我确实在应用程序中导入了引导程序，并检查它是否已导入文件中。

//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在我的模板中不起作用？

1 个答案: