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: styles/app.css și app.js.

Folosind Sass

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

        1
        $ mv assets/styles/app.css assets/styles/app.scss
    

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

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

 // start the Stimulus application
 import './bootstrap';
    

Instalează procesatorul Sass:

        1
        $ yarn add node-sass sass-loader --dev
    

Și activează loader-ul Sass în webpack:

        1
2
3
4
5
6
7
8
9
10
11
        --- a/webpack.config.js
+++ b/webpack.config.js
@@ -56,7 +56,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:

$ yarn add [email protected] jquery popper.js bs-custom-file-input --dev

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

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

Fă același lucru pentru fișierul JS:

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

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

 // start the Stimulus application
 import './bootstrap';
+
+bsCustomFileInput.init();
    

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

        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-5.2.zip', 'guestbook-5.2.zip');"
$ unzip -o guestbook-5.2.zip
$ rm guestbook-5.2.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.

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