Passo 22: Impostare lo stile dell’interfaccia utente con Webpack

5.0 version
Maintained

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 <https://webpack.js.org/>`_, 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: ``css/app.css e js/app.js.

Utilizzo di Sass

Invece di usare i normali CSS, passiamo a Sass:

1
$ mv assets/css/app.css assets/css/app.scss
patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -6,7 +6,7 @@
  */

 // any CSS you import will output into a single css file (app.css in this case)
-import '../css/app.css';
+import '../css/app.scss';

 // Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
 // import $ from 'jquery';

Installare sass-loader:

1
$ yarn add node-sass "[email protected]^7.0.1" --dev

E abilitare il Sass loader in webpack:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -54,7 +54,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 yarn add 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
$ yarn add bootstrap jquery popper.js bs-custom-file-input --dev

Richiediamo Bootstrap nel file CSS (abbiamo anche ripulito il file):

patch_file
1
2
3
4
5
6
7
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,3 +1 @@
-body {
-    background-color: lightgray;
-}
[email protected] '~bootstrap/scss/bootstrap';

Facciamo lo stesso per il file JS:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -7,8 +7,7 @@

 // any CSS you import will output into a single css file (app.css in this case)
 import '../css/app.scss';
+import 'bootstrap';
+import bsCustomFileInput from 'bs-custom-file-input';

-// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
-// import $ from 'jquery';
-
-console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
+bsCustomFileInput.init();

Il sistema dei form di Symfony supporta Bootstrap nativamente con un tema speciale, abilitiamolo:

config/packages/twig.yaml
1
2
twig:
    form_themes: ['bootstrap_4_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.zip', 'guestbook.zip');"
$ unzip -o guestbook.zip
$ rm guestbook.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 yarn encore 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 yarn encore dev --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, SymfonyCloud rileva automaticamente che si sta usando Encore e compila gli asset per noi durante la fase di build.


  • « Previous Passo 21: Caching per le prestazioni
  • Next » Passo 23: Ridimensionamento delle immagini

This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.