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

5.2 version
Maintained

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

Ми не витрачали часу на дизайн інтерфейсу користувача. Щоб стилізувати як професіонали, ми будемо використовувати сучасний стек, заснований на Webpack. А щоб додати штрих Symfony і полегшити його інтеграцію із застосунком, встановімо Webpack Encore:

1
$ symfony composer req encore

Для вас створено повноцінне середовище Webpack: package.json і webpack.config.js згенеровані й містять готову до використання конфігурацію за замовчуванням. Відкрийте webpack.config.js, він використовує абстракцію Encore для налаштування Webpack.

Файл package.json визначає кілька зручних команд, які ми будемо використовувати постійно.

Каталог assets містить основні точки входу для ресурсів проекту: styles/app.css та app.js.

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

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

1
$ mv assets/styles/app.css assets/styles/app.scss
patch_file
 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:

patch_file
 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 jquery popper.js bs-custom-file-input --dev

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

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

Зробіть те саме для файлу JS:

patch_file
 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 зі спеціальною темою, увімкніть її:

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

Стилізація HTML

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

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

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

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

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

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

1
$ symfony run yarn encore dev

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

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

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

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

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


  • « Previous Крок 21: Кешування для підвищення продуктивності
  • Next » Крок 23: Зміна розміру зображень

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