Discussion :

[zevince]

Bonjour,

Symfony version 7.1.2

Je découvre le nouveau "AssetMapper" de Symfony.
J'ai déjà un problème avec Bootstrap.
Je l'ai installé comme recommandé (en plus c'est l'exemple utilisé dans la doc).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

php bin/console importmap:require bootstrap

Il m'a bien ajouté les lignes correspondantes dans l'importmap :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
return [
    'app' => [
        'path' => './assets/app.js',
        'entrypoint' => true,
    ],
    '@hotwired/stimulus' => [
        'version' => '3.2.2',
    ],
    '@symfony/stimulus-bundle' => [
        'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
    ],
    '@hotwired/turbo' => [
        'version' => '7.3.0',
    ],
    'bootstrap' => [
        'version' => '5.3.3',
    ],
    '@popperjs/core' => [
        'version' => '2.11.8',
    ],
    'bootstrap/dist/css/bootstrap.min.css' => [
        'version' => '5.3.3',
        'type' => 'css',
    ],
    'notyf' => [
        'version' => '3.10.0',
    ],
];

Mais déjà je me demande si c'est le bon ordre ? Il me semblait que popperjs devait être chargé avant bootstrap ?

Dans assets/app.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
import './bootstrap.js';
 
/*
 * Welcome to your app's main JavaScript file!
 *
 * This file will be included onto the page via the importmap() Twig function,
 * which should already be in your base.html.twig.
 */
import './styles/notyf.css';
import './styles/app.css';
import 'bootstrap/dist/css/bootstrap.min.css';

Et enfin dans assets/vendor/bootstrap/bootstrap.index.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

import*as t from"@popperjs/core";

Alors popper est chargé plusieurs fois ?

Enfin, mon problème principal pour le moment ..
J'ai copié collé la navbar de bootstrap dans mon template, elle s'affiche bien, mais quand je clique sur un des liens, qui sont des

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#">

donc ne devraient rien faire, à part ouvrir le dropdown si c'en est un.. La page se recharge ?

Comportement bizarre !

Donc je soupçonne un souci avec popperjs, mais pas sur de comment le solutionner le plus proprement ?

Ça accélère vraiment le chargement des pages, ces nouvelles techniques proposées par AssetMapper ? Parce que pour le moment, les choses les plus simples me prennent des heures !

Merci

[zevince]

Bon, pas trouvé la solution "propre".. J'ai désinstallé bootstrap par l'importmap, téléchargé la version dist, et fait les imports directement dans app.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
import './bootstrap.js';
import './vendor/bootstrap-5.3.3-dist/js/bootstrap.bundle.js';
/*
 * Welcome to your app's main JavaScript file!
 *
 * This file will be included onto the page via the importmap() Twig function,
 * which should already be in your base.html.twig.
 */
import './styles/notyf.css';
import './styles/app.css';
import './vendor/bootstrap-5.3.3-dist/css/bootstrap.min.css';

Et maintenant ça marche