Etap 22: Stylowanie interfejsu użytkownika z wykorzystaniem narzędzia Webpack

5.0 version
Maintained

Stylowanie interfejsu użytkownika z wykorzystaniem narzędzia Webpack

Nie poświęciliśmy zbyt wiele czasu na projektowanie interfejsu użytkownika. Aby go profesjonalnie ostylować, użyjemy nowoczesnego zestawu narzędzi, opartego na Webpacku. Aby ułatwić jego integrację z naszą aplikacją zainstalujemy Webpack Encore:

1
$ symfony composer req encore

Pełne środowisko Webpack zostało przygotowane: package.json i webpack.config.js zostały wygenerowane i zawierają dobrą domyślną konfigurację. Otwórz plik webpack.config.js – używa on abstrakcji Encore do konfiguracji Webpacka.

Plik package.json definiuje kilka ciekawych poleceń, których będziemy używać przez cały czas.

Katalog assets zawiera główne punkty wejścia dla zasobów projektu: css/app.css oraz js/app.js.

Używanie Sass

Zamiast używać zwykłego CSS, skorzystajmy z 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';

Zainstaluj moduł ładowania Sass:

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

I uruchom go w Webpacku:

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

Skąd wiedziałem, które pakiety zainstalować? Gdybyśmy spróbowali zbudować nasze zasoby bez nich, Encore wyświetliłby komunikat błędu sugerujący uruchomienie polecenia yarn add potrzebnego do instalacji zależności służących do ładowania plików .scss.

Wykorzystanie Bootstrapa

Potrzebujemy solidnych podstaw do zbudowania responsywnej strony internetowej. Framework CSS, taki jak Bootstrap spełnia te warunki. Zainstaluj go jako pakiet (ang. package):

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

Dołącz (ang. require) Bootstrapa w pliku CSS (wyczyściliśmy również ten plik):

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

Zrób to samo w przypadku pliku 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();

System formularzy Symfony obsługuje natywnie Bootstrapa ze specjalnym motywem, włącz go:

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

Stylowanie HTML

Jesteśmy teraz gotowi do stylowania aplikacji. Pobierz i rozpakuj archiwum w katalogu głównym projektu:

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

Spójrz na szablony Twig, znajdziesz w nich kilka ciekawych rozwiązań.

Budowanie zasobów (ang. assets)

Jedną z głównych różnic w korzystaniu z Webpacka jest to, że pliki CSS i JS nie mogą być wykorzystywane bezpośrednio przez aplikację. Najpierw trzeba je „skompilować”.

Podczas rozwoju aplikacji, kompilacja zasobów może być wykonana za pomocą polecenia encore dev:

1
$ symfony run yarn encore dev

Zamiast wykonywać polecenie za każdym razem, gdy wystąpi zmiana, uruchom je w tle i pozwól mu obserwować zmiany w plikach JS i CSS:

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

Poświęć czas na odkrycie zmian wizualnych. Przyjrzyj się nowemu wyglądowi w przeglądarce.

Wygenerowany formularz logowania jest teraz ostylowany, a Maker Bundle używa domyślnie klas CSS Bootstrapa:

W środowisku produkcyjnym SymfonyCloud automatycznie wykrywa, że używasz Encore i kompiluje zasoby za Ciebie podczas fazy budowania aplikacji.


  • « Previous Etap 21: Użycie pamięci podręcznej w celu zwiększenia wydajności
  • Next » Etap 23: Zmienianie rozmiaru obrazów

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