Стилізація інтерфейсу користувача за допомогою Webpack

Використання Sass

Замість того щоб використовувати звичайний CSS, перемкнімося на Sass:

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

Встановіть завантажувач Sass:

1

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

І увімкніть його у 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()

Як я дізнався, які пакети потрібно встановити? Якби ми намагалися зібрати наші ресурси без них, Encore видав би нам приємне повідомлення про помилку, пропонуючи команду yarn add, необхідну для встановлення залежностей, щоб завантажити файли .scss

Використання Bootstrap

Щоб почати з хороших налаштувань за замовчуванням і створити адаптивний веб-сайт, CSS-фреймворк, на зразок Bootstrap, може значною мірою стати в пригоді. Встановіть його як пакет:

1

$ yarn add bootstrap @popperjs/core bs-custom-file-input --dev

Включіть Bootstrap у файлі CSS (ми також очистили файл):

1
2
3
4
5
6
7

--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -1,3 +1 @@
-body {
-    background-color: lightgray;
-}
+@import '~bootstrap/scss/bootstrap';

Зробіть те саме для файлу 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();

Система форм Symfony з коробки підтримує Bootstrap зі спеціальною темою, увімкніть її:

1
2

twig:
    form_themes: ['bootstrap_5_layout.html.twig']

Стилізація HTML

Зараз ми готові стилізувати застосунок. Завантажте та розгорніть архів у корені проекту:

1
2
3

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

Погляньте на шаблони, ви могли б дізнатися одну чи дві хитрощі про Twig.

Збірка ресурсів

Однією з основних змін при використанні Webpack є те, що CSS і JS-файли не використовуються застосунком безпосередньо. Спочатку їх потрібно "скомпілювати".

У процесі розробки збірка ресурсів може бути виконана за допомогою команди encore dev:

1

$ symfony run yarn dev

Замість того щоб виконувати команду щоразу, коли відбувається зміна, відправте її у фоновий режим і дозвольте спостерігати за змінами JS і CSS:

1

$ symfony run -d yarn dev --watch

Знайдіть час, щоб дослідити візуальні зміни. Погляньте на новий дизайн у браузері.

Згенеровану форму входу тепер також стилізовано, оскільки бандл Maker, за замовчуванням, використовує CSS-класи Bootstrap:

Для продакшн Platform.sh автоматично виявляє, що ви використовуєте Encore, і компілює ресурси для вас під час фази збірки.