Import de dépendances

Version imprimable

Bonjour, bonsoir

navré de revenir vers vous pour une question du genre, mais j'avoue ne pas voir ce qui coince.

Le code suivant, génère une navbar avec bootstrap 4.

Dans un jsfiddle, il fonctionne parfaitement, mais dans mon projet symfony, j'ai le design de bootstrap, mais les actions sur les dropdown ne fonctionnent pas.
La différence vient donc de mes imports de fichiers CSS et js.

Code navbar

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

Le fichier package.json contenant mes dépendances gérés par yarn

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.0",
        "jquery.js": "0.0.2-security",
        "node-sass": "^4.11.0",
        "popper.js": "^1.14.6",
        "sass-loader": "^7.0.1",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "bootstrap": "^4.2.1",
        "jquery": "^3.3.1"
    }
}

Ce que je fais dans mon fichier app.js

Code:

1
2
3
4
5
6
7
8
 
 
require('popper.js');
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');
 
 
require('bootstrap');

J'espère que vous avez une idée de ce qui coince, car je sèche complètement :/

Merci.

30/12/2018, 09h23
Sodium

Est-ce que tu charges bien le JavaScript de Bootstrap dans ton template ?
Est-ce que si tu ouvre le fichier JavaScript chargé par ta page, tu as bien le code de bootstrap dedans ?
Est-ce que tu as des erreurs dans la console ?

En console, j'ai l'erreur suivante; qui n'a aucun rapport à priori.

Code:

Failed to load resource: the server responded with a status of 404 (Not Found) :8000/favicon.ico:1

SI ça peut aider, voici ma config webpack
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 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') /* * 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. */ .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app','./assets/scss/app.scss') // will require an extra script tag for runtime.js // but, you probably want this, unless you're building a single-page app .enableSingleRuntimeChunk() .cleanupOutputBeforeBuild() .enableBuildNotifications() .enableSourceMaps(!Encore.isProduction()) // enables hashed filenames (e.g. app.abc123.css) .enableVersioning(Encore.isProduction()) // enables Sass/SCSS support .enableSassLoader() ;
Pour répondre à tes autres question, ce que je charge c'est le résultat stocké dans le build.

Dans mon header je charge le css:

Code:

<link rel="stylesheet" href="/build/css/app.css">

A la fin du body je charge le js.

Code:

<script src="/build/js/app.js"></script>

Sachant que le fichier app.js charge les dépendances selon le fichier que j'ai mis dans le premier message.

SI je regarde de plus près le contenu du build de app.js

Voici ce que l'on retrouve entre autre à l'intérieur:
Code:

1 2 3 4 5 6 7 8 9 __webpack_require__(/*! popper.js */ "./node_modules/popper.js/dist/esm/popper.js"); var $ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js"); __webpack_require__(/*! bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.js"); console.log('Hello Webpack Encore! Edit me in assets/js/app.js'); /***/ }),
Merci pour votre aide.