On va ici découvrir comment ajouter Select2 à Symfony en utilisant Webpack-Encore. On installera également Bootstrap 5.
Nous verrons également comment éventuellement changer de version de NodeJS à la vollée, ce qui est plutôt pratique lors de certains tests, sur certains matériels et environnements...
### Symfony ###
### NodeJS ###
Sous Ubuntu 21.10 : NodeJS v17.1.0
### Nvm ###
Un petit utilitaire hyper pratique poir chnager de version de NodeJS à la volée : NVM
$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
$ source ~/.profile
On installe la dernière version de NodeJS :
Si vous voulez instgaller une version 16 de NodeJS :
Si vous voulez utiliser la version 16 de NodeJS :
Now using node v16.4.2 (npm v7.18.1)
### Webpack-Encore ###
$ yarn install
Renommer le fichier /assets/styles/app.css en app.scss
Modifier le fichier /assets/app.js :
import './styles/app.scss';
../..
Décommenter
dans le fichier webpack.config.js (fichier à la racine du projet)
Vérifiez bien que le fichier /templates/base.html.twig possède les lignes adéquates pour "appeler" Webpack :
et
Première compilation :
On installe PostCSS :
On crée un fichier postcss.config.js à la racine du projet avec :
plugins: {
autoprefixer: {}
}
}
### BOOTSTRAP ###
On instgalle Bootstrap 5 :
Puis on modifie le fichier /assets/app.js :
On crée un fichier custom.css dans /assets/style qui servira à y déposer notre CSS perso.
Puis on importe tout ça dans /assets/styles/app.scss (on efface les 2 ou 3 lignes de CSS et on met le code suivant à la place) :
@import "~bootstrap/scss/bootstrap";
Et on recompile :
Si vous n'avez pas d'erreur de compilation, Boostrap devrait être installé !
### SELECT2 ET JQUERY ###
On installe Jquery et Select2 :
$ yarn add select2
On "importe" Selerct2 dans le fichier assets/styles/app.scss :
On importe déclare Jquery et Select2 dans le fichier assets/app.app.js :
require('select2')
$('select').select2();
Ici on vient d'appliquer Select2 à la balise <select> de tous les fichiers du site.
Et voila !
1 commentaire
phneutre1 Répondre
Merci