Discussion :

[Charvalos]

Bonjour à tous !

J'essaie actuellement Symfony sous sa version 4 et j'aimerais également ajouter Bootstrap. Malheureusement, j'ai beau chercher sur Internet mais soit je ne trouve rien soit je trouve différentes choses.

J'ai suivi la doc et tout fonctionne mais ensuite, comment faire pour l'intégrer à un template ?

Sur le coup, je suis un peu perdu d'autant plus que la documentation n'aide pas vraiment.

Pour le moment, j'ai un :

- assets
- css/global.scss
- js/main.js

et dans le dossier node_modules, j'ai bien un dossier bootstrap-sass.

Merci d'avance pour explications !

[armel18]

bonjour,

quelques indications pour configurer Encore/Webpack(webpack.config.js).
il s'agit de renseigner les fichiers (js,scss,css...) en entrée via la méthode addEntry() et indiquer le répertoire public via la méthode setOutputPath('public/build/') destiné à contenir ces fichiers css, js qui seront appelés dans le template

[Charvalos]

Cela à l'air de fonctionner mais j'ai remarqué que c'était pour la version 3.x de Bootstrap. Il y a moyen d'avoir la dernière version de Bootstrap ?

[armel18]

bootstrap 4 (en version stable) n'est pas encore dans les packages npm. Pour l'installer il faut prendre la version beta:

Code :

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

1
2
 
npm install bootstrap@4.0.0-beta.3

bootstrap scss 4 se trouve dans le dossier node_modules/bootstrap/scss/bootstrap.Pour l'importer depuis un fichier scss:

Code :

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

1
2
 
@import '~bootstrap/scss/bootstrap';

[Charvalos]

Merci de ta réponse.

J'utilise Composer et je l'ai donc installé via la fonction indiqué.

J'ai ensuite indiqué dans app.scss :

Code :

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

@import '~vendors/twbs/bootstrap/scss';

et dans app.js :

Code :

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

require('vendors/twbs/bootstrap/scss');

J'ai également fait la même chose pour JQuery mais quand je lance la commande yarn run encore dev, il me dit qu'il ne trouve pas les dépendances.

J'avoue que je suis un peu perdu et la doc n'aide vraiment pas, je trouve.

[armel18]

la compilation des fichiers scss|sass avec node exige le module node-sass. Webpack/Encore a besoin du loader sass-loader qui va rechercher tous les fichiers scss|sass de ton projet. si tu n'as pas ces 2 modules, il faut les installer:

Code :

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

1
2
 
yarn add -D node-sass sass-loader