javascript - 下拉菜单不适用于 bootstrap 4/webpack encore/symfony 4 helppp

Question

我想使用 bootstrap 下拉菜单，但是当我点击它时它没有任何反应。我将它与 webpack encore 一起使用。

这里是 html :

    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
    {% endblock %}

...

        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown09"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown09">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>

(如果我使用下面的 3 个链接它可以工作，但我想让它与 app.js 一起工作)

{% block javascripts %}
    {#<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>#}
    {#<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>#}
    {#<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>#}

    <script src="{{ asset('build/app.js') }}"></script>
{% endblock %}

这是我的文件 webpack.config.js :

var Encore = require('@symfony/webpack-encore');
var Dotenv = require('dotenv-webpack');

Encore
// directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */

    // will create public/build/app.js
    .addEntry('app', './assets/js/app.js')

    // will create and public/build/css/app.css
    .addStyleEntry('css/app', ['./assets/css/app.scss'])

    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // enable vue.js
    .enableVueLoader()

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables Sass/SCSS support
    .enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .addPlugin(new Dotenv({
        path: './.env',
        safe: false
    }))

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery'
    });
;


module.exports = Encore.getWebpackConfig();

这里是 app.js :

var $ = require('jquery');
require('popper.js');
require('bootstrap');

应用.scss:

@import "~bootstrap/scss/bootstrap";
//@import "bootstrap.min.css";
@import "navbar.css";

我跑了:

yarn install
yarn add bootstrap-sass --dev
yarn add bootstrap --dev
yarn add jquery popper.js --dev
yarn run encore dev

请帮忙请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助

Answer 1

我找到了!我们必须在 webpack.config.js 中注释这部分:

// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
// .enableSingleRuntimeChunk()