Bootstrap dans un projet Symfony 3 avec Webpack.encore

09 juin 2018, 16:37

Hello,

Dans mon projet en Symfony 3.4, je souhaite utiliser le JS de Bootstrap pour quelques fonctionnalitées (dans ce cas présent : le carousel) mais Bootstrap n'a pas l'air reconnu. Pour compiler mon JS, et selon les bonnes pratiques DF 3.4, j'utilise webpack.encore. J'ai pour habitude de coder mes scripts JS en utilisant le module Pattern.

Côté code, voila à quoi ça ressemble :
le webpack.config :

Code : Tout sélectionner

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

Encore
  // the project directory where all compiled assets will be stored
  .setOutputPath('web/assets/dist')
  // the public path used by the web server to access the previous directory
  .setPublicPath('/assets/dist')
  .addEntry('scripts_dso', './src/AppBundle/Resources/public/js/script.js')
  // allow legacy applications to use $/jQuery as a global variable
  .autoProvidejQuery()
  // Fot bootstrap
  .autoProvideVariables({ Popper: ['popper.js', 'default'] })
  // empty the outputPath dir before each build
  .cleanupOutputBeforeBuild()
;
module.exports = Encore.getWebpackConfig();

Bootstrap a été installé via NPM.
Mes scripts sont tous appelés dans le fichier script.js :

Code : Tout sélectionner

// ==================================================
// Import JS libraries files and project files here
// ==================================================
require('./../.././../../../node_modules/jquery-typeahead/dist/jquery.typeahead.min.css');
require('../styles/typehead.css');

import 'bootstrap';
import "./scripts/init.js"
// ALL scripts : 
import "./scripts/galleryCarousel.js"

Le init.js permet de charger automatiquement tous les autres, il est simplement comme ça :

Code : Tout sélectionner

window.DSO = window.DSO || {};

$(function () {
  for(var module in DSO){
    if (DSO[module].init){
      DSO[module].init();
    }
  }
});

Et enfin le JS qui ne fonctionne pas :

Code : Tout sélectionner

window.DSO = window.DSO || {};

DSO.galleryCarousel = (function ($, ns) {

  ns.CAROUSEL_ID = '#multi-gallery-astrobin';

  ns.init = function() {
    $(ns.CAROUSEL_ID).carousel({
        interval: 2000
    });
  };

  return ns;
})(jQuery, {});

Le probleme est que je n'ai aucune erreur dans ma console -_-, du coup pour debugguer...pas top. Je soupsonne, qu'il n'est pas chargé quand je suis dans chacune de mes fonctions, mais pourquoi ? et comment le faire entrer ?

Le HTML :

      <div id="multi-gallery-astrobin" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          {% for img in dso.images.listImages|slice(1, dso.images.count) %}
            <div class="carousel-item active">
              <img class="d-block w-100" src="{{ img.url_hd }}" alt="First slide">
            </div>
          {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#multi-gallery-astrobin" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#multi-gallery-astrobin" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

Si vous avez eu des soucis de Bootstrap avec Webpack.encore, vos solutions m'interessent

.

Merci

15 juin 2018, 18:58

UP, j'ai vraiment besoin d'une solution svp :/

Bootstrap dans un projet Symfony 3 avec Webpack.encore

Qui est en ligne