Stap 22: De gebruikersinterface stylen met Webpack

5.0 version
Maintained

De gebruikersinterface stylen met Webpack

We hebben geen tijd besteed aan het ontwerp van de gebruikersinterface. Om als een pro te stylen, gebruiken we een moderne stack, gebaseerd op Webpack. En om een snufje Symfony toe te voegen en de integratie met de toepassing te vergemakkelijken, installeren we Webpack Encore:

1
$ symfony composer req encore

Er is een volledige Webpack-omgeving voor je gecreëerd: package.json en webpack.config.js zijn gegenereerd en bevatten een goede standaardconfiguratie. Open webpack.config.js, het gebruikt de Encore abstractie om Webpack te configureren.

Het package.json-bestand definieert een aantal handige commando’s die we vaak zullen gaan gebruiken.

De assets-map bevat de belangrijkste toegangspunten voor de assets van het project: css/app.css en js/app.js.

Sass gebruiken

Laten we overschakelen naar Sass, in plaats van gewone CSS te gebruiken:

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';

Installeer de Sass-loader:

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

En schakel in webpack de Sass-loader in:

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()

Hoe wist ik welke packages ik moest installeren? Als we hadden geprobeerd om onze assets te bouwen zonder de juiste packages, zou Encore ons een mooie foutmelding hebben gegeven met de suggestie het commando yarn add te draaien. Daarmee installeer je de dependencies die benodigd zijn om .scss-bestanden te laden.

Bootstrap gebruiken

Om te beginnen met goede standaardinstellingen en het bouwen van een responsive website, kom je met een CSS-framework als Bootstrap al een heel eind. Installeer het als een package:

1
$ yarn add bootstrap jquery popper.js bs-custom-file-input --dev

Voeg Bootstrap toe aan het CSS-bestand (we hebben ook het bestand opgeschoond):

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';

Doe hetzelfde voor het JS-bestand:

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();

Het Symfony-formuliersysteem ondersteunt Bootstrap standaard met een speciaal thema. Schakel deze in:

config/packages/twig.yaml
1
2
twig:
    form_themes: ['bootstrap_4_layout.html.twig']

Styling toevoegen aan de HTML

We zijn nu klaar om de applicatie te stylen. Download de zip in de root van het project en pak het uit:

1
2
3
$ php -r "copy('https://symfony.com/uploads/assets/guestbook.zip', 'guestbook.zip');"
$ unzip -o guestbook.zip
$ rm guestbook.zip

Neem eens een kijkje in de templates, misschien leer je nog een paar handige Twig-trucjes.

Assets genereren

Wat anders is bij Webpack, is dat CSS- en JS-bestanden niet direct gebruikt worden door de toepassing. Ze moeten eerst “gecompileerd” worden.

Tijdens development kun je de assets compileren met het encore dev-commando:

1
$ symfony run yarn encore dev

In plaats van het commando uit te voeren elke keer als er een wijziging is, kun je het ook in de achtergrond je JS en CSS automatisch in de gaten laten houden:

1
$ symfony run -d yarn encore dev --watch

Neem de tijd om de visuele veranderingen te ontdekken. Bekijk het nieuwe ontwerp in een browser.

Het gegenereerde aanmeldingsformulier is nu gestyled en de Maker-bundle maakt standaard gebruik van Bootstrap CSS-classes:

Voor productie detecteert SymfonyCloud automatisch dat je Encore gebruikt en stelt de assets voor je samen tijdens het genereren.


  • « Previous Stap 21: Caching voor performance
  • Next » Stap 23: Formaat van afbeeldingen wijzigen

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