Folosind Sass¶

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

1

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

 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:

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

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:

 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:

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.