下拉菜单不能与bootstrap 4 / webpack encore / symfony 4 helppp一起使用

I want to use bootstrap dropdowns but it does nothing when I click on it. I use it with webpack encore.

Here the 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>

(if i use the 3 links bellow it works, but i want to make it work with 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 %}

Here is my file 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();

Here the app.js :

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

app.scss :

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

I ran :

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

Please help Please helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease help

dryl34156
dryl34156 控制台中没有错误
一年多之前 回复
drj14664
drj14664 你在控制台看到错误吗?
一年多之前 回复
douhuan6157
douhuan6157 我想你可能需要说几次请多帮忙。你已经说了30次就不清楚了。
一年多之前 回复

1个回答



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

  //将需要额外的runtime.js 
//脚本标签,但你可能想要这个,除非 你正在构建单页应用程序
。.enableSingleRuntimeChunk()
</ code> </ pre>
</ div>

展开原文

原文

I found ! We must comment this part in 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()

dongtao1262
dongtao1262 当我感谢你的问题时,我不需要注释掉.enableSingleRuntimeChunk()来让Symfony4 + webpack + Bootstrap 4很好地融合在一起。 但是,我确实知道没有办法将KnpMenuBundle包括在内。 我用老式的方式重写了我的所有菜单 - 用html(除了href使用twig的路径(...))。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐