Использование Sass¶

Вместо обычного CSS давайте воспользуемся Sass:

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

Установите загрузчик Sass:

1

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

А затем включите Sass в конфигурации 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()

Как я узнал, какие пакеты нужно установить? При попытке собрать ресурсы без необходимых пакетов, Encore вернул бы нам сообщение об ошибке и предложил бы выполнить команду yarn add, чтобы установить зависимости для обработки файлов с расширением``.scss``.

Эффективное использование Bootstrap¶

В создании адаптивного сайта, особенно в самом начале разработки, такой CSS-фреймворк как Bootstrap, может значительно помочь. Установите его как пакет:

1

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

Теперь подключите Bootstrap в следующем CSS-файле (предварительно очистив его):

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

То же самое нужно сделать в 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();

У форм в Symfony есть встроенная поддержка Bootstrap со специальной темой, включите её:

1
2

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

Стилизация HTML-шаблона¶

Теперь всё готово, чтобы непосредственно перейти к оформлению внешнего вида приложения. Скачайте и распакуйте архив в корневой директории проекта:

1
2
3

$ php -r "copy('https://symfony.com/uploads/assets/guestbook.zip', 'guestbook.zip');"
$ unzip -o guestbook.zip
$ rm guestbook.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 и поэтому автоматически во время сборки приложения скомпилирует все его ресурсы.