Pas 22: Stilarea interfeței cu Webpack

5.0 version
Maintained

Stilarea interfeței cu Webpack

Nu am acordat timp pentru proiectarea interfeței de utilizator. Pentru a adăuga stiluri ca un profesionist, vom folosi unelte moderne, inclusiv Webpack. Pentru a ușura integrarea acestuia cu aplicația, instalăm Webpack Encore:

1
$ symfony composer req encore

Un mediu Webpack complet a fost creat pentru tine: package.json și webpack.config.js au fost generate și conțin o configurație implicită bună. Deschide webpack.config.js, utilizează abstracția Encore pentru a configura Webpack.

Fișierul package.json definește câteva comenzi utile pe care le vom utiliza tot timpul.

Directorul assets conține principalele puncte de intrare pentru componentele de stilizare a proiectului: css/app.css și js/app.js.

Folosind Sass

În loc să utilizăm CSS simplu, să trecem la Saas:

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

Instalează procesatorul Sass:

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

Și activează loader-ul Sass în 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()

De unde am știut ce pachete să instalez? Dacă am fi încercat să ne construim fișierele de stilizare fără ele, Encore ne-ar fi dat un frumos mesaj de eroare sugerând comanda yarn add necesară instalării dependențelor pentru a încărca fișierele .scss.

Folosind Bootstrap

Pentru a începe cu setări prestabilite bune și a construi un site web sensibil, un framework CSS precum Bootstrap poate scurta procesul cu mult. Instalează-l ca pachet:

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

Solicită Bootstrap în fișierul CSS (am mai curățat fișierul):

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

Fă același lucru pentru fișierul 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();

Sistemul de formulare Symfony acceptă Bootstrap nativ cu o temă specială, activează-l:

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

Stilizarea HTML-ului

Suntem gata acum să stilăm aplicația. Descărcați și extindeți arhiva de la rădăcina proiectului:

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

Aruncă o privire la șabloane, poți afla un truc sau două despre Twig.

Compilând assets-urile web

O schimbare majoră atunci când utilizezi Webpack este că fișierele CSS și JS nu pot fi utilizate direct de aplicație. Mai întâi trebuie „compilate”.

În dezvoltare, compilarea fișierelor de stilizare se poate face prin comanda encore dev:

1
$ symfony run yarn encore dev

În loc de executarea comenzii de fiecare dată când există o schimbare, trimite-l la fundal și lasă-l să urmărească modificările JS și CSS:

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

Explorează schimbările vizuale. Aruncă o privire la noul design într-un browser.

Formularul de autentificare generat este acum stilat, precum și pachetul Maker utilizează în mod implicit clasele CSS Bootstrap:

Pentru producție, SymfonyCloud detectează automat utilizarea Encore și compilează fișierele necesare pentru tine în timpul fazei de construcție.


  • « Previous Pas 21: Cache pentru performanță
  • Next » Pas 23: Redimensionarea imaginilor

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