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
2
        $ symfony composer rem asset-mapper
$ 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 assetscontiene 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
        --- a/assets/app.js
+++ b/assets/app.js
@@ -6,4 +6,4 @@
  */

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

Installare sass-loader:

        1
        $ npm install node-sass sass-loader@13 --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
@@ -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 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
        --- a/assets/app.js
+++ b/assets/app.js
@@ -7,3 +7,7 @@

 // 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';
+
+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_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.4.zip', 'guestbook-6.4.zip');"
$ unzip -o guestbook-6.4.zip
$ rm guestbook-6.4.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.

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

TOC

Version