Impostare lo stile dell'interfaccia utente con Webpack
Impostare lo stile dell'interfaccia utente con Webpack
Non abbiamo speso tempo nella progettazione dell'interfaccia utente. Per impostare uno stile professionale, utilizzeremo uno stack moderno basato su Webpack, e per aggiungere un tocco di Symfony e facilitare la sua integrazione con l'applicazione, installiamo Webpack Encore:
1
$ symfony composer req encore
Un ambiente Webpack completo è stato creato per noi: package.json
e webpack.config.js
sono stati generati e contengono una buona configurazione predefinita. Aprendo webpack.config.js
, potremo notare l'utilizzo dell'astrazione Encore usata per configurare Webpack.
Il file package.json
definisce alcuni comandi che useremo sempre.
La cartella assets
contiene i principali punti di ingresso per le risorse del progetto: styles/app.css
e app.js
.
Utilizzo di Sass
Invece di usare i normali CSS, passiamo a Sass:
1
$ mv assets/styles/app.css assets/styles/app.scss
1 2 3 4 5 6 7 8 9 10 11
--- a/assets/app.js
+++ b/assets/app.js
@@ -6,7 +6,7 @@
*/
// any CSS you import will output into a single css file (app.css in this case)
-import './styles/app.css';
+import './styles/app.scss';
// start the Stimulus application
import './bootstrap';
Installare sass-loader:
1
$ npm install node-sass sass-loader --save-dev
E abilitare il Sass loader in webpack:
1 2 3 4 5 6 7 8 9 10 11
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -57,7 +57,7 @@ Encore
})
// enables Sass/SCSS support
- //.enableSassLoader()
+ .enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
Come facevo a sapere quali pacchetti installare? Se si tenta un build senza pacchetti, Encore mostra un messaggio di errore e suggerisce il comando npm install
per installare le dipendenze (necessarie per caricare i file .scss
).
Sfruttare Bootstrap
Per iniziare con buone impostazioni predefinite e costruire un sito responsive, un framework CSS come Bootstrap può aiutarci molto. Installiamolo come pacchetto:
1
$ npm install bootstrap @popperjs/core bs-custom-file-input --save-dev
Richiediamo Bootstrap nel file CSS (abbiamo anche ripulito il file):
1 2 3 4 5 6 7
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -1,3 +1 @@
-body {
- background-color: lightgray;
-}
+@import '~bootstrap/scss/bootstrap';
Facciamo lo stesso per il file JS:
1 2 3 4 5 6 7 8 9 10 11 12 13
--- a/assets/app.js
+++ b/assets/app.js
@@ -7,6 +7,10 @@
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';
+import 'bootstrap';
+import bsCustomFileInput from 'bs-custom-file-input';
// start the Stimulus application
import './bootstrap';
+
+bsCustomFileInput.init();
Il sistema dei form di Symfony supporta Bootstrap nativamente con un tema speciale, abilitiamolo:
1 2
twig:
form_themes: ['bootstrap_5_layout.html.twig']
Impostare lo stile dell'HTML
Ora siamo pronti per impostare lo stile dell'applicazione. Scarichiamo ed estraiamo l'archivio nella cartella principale del progetto:
1 2 3
$ php -r "copy('https://symfony.com/uploads/assets/guestbook-6.2.zip', 'guestbook-6.2.zip');"
$ unzip -o guestbook-6.2.zip
$ rm guestbook-6.2.zip
Dando un'occhiata ai template, potreste imparare un paio di trucchi su Twig.
Build degli asset
Un cambiamento importante quando si usa Webpack è che i file CSS e JS non sono utilizzabili direttamente dall'applicazione. Devono essere prima "compilati".
Durante lo sviluppo, gli asset possono essere compilati tramite il comando encore dev
:
1
$ symfony run npm run dev
Invece di eseguire il comando ogni volta che c'è una modifica, metterlo in background e lasciare che intercetti le modifiche dei file JS e CSS:
1
$ symfony run -d npm run watch
Prendetevi il tempo per scoprire i cambiamenti visivi. Date un'occhiata al nuovo design in un browser.


Il form di login generato ha ora uno stile, perché MakerBundle usa di default le classi CSS di Bootstrap:

In produzione, Platform.sh rileva automaticamente che si sta usando Encore e compila gli asset per noi durante la fase di build.