Passo 22: Estilizando a Interface do Usuário com o Webpack

5.0 version
Maintained

Estilizando a Interface do Usuário com o Webpack

Nós não dedicamos nenhum momento ao design da interface do usuário. Para estilizar como um profissional, vamos usar uma stack moderna, baseada no Webpack. E para adicionar um toque de Symfony e facilitar sua integração com a aplicação, vamos instalar o Webpack Encore:

1
$ symfony composer req encore

Um ambiente completo do Webpack foi criado para você: package.json e webpack.config.js foram gerados e contêm uma boa configuração padrão. Abra o webpack.config.js, ele usa a abstração do Encore para configurar o Webpack.

O arquivo package.json define alguns comandos legais que usaremos o tempo todo.

O diretório assets contém os principais pontos de entrada para os assets do projeto: css/app.css e js/app.js.

Utilizando Sass

Ao invés de usar CSS simples, vamos mudar para Sass:

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

Instale o loader do Sass:

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

E habilite o loader do Sass no webpack:

patch_file
 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()

Como eu sabia quais pacotes instalar? Se tentássemos construir nossos assets sem eles, o Encore nos daria uma mensagem de erro sugerindo o comando yarn add necessário para instalar dependências para carregar arquivos .scss.

Tirando Proveito do Bootstrap

Para começar com bons padrões e construir um site responsivo, um framework CSS como o Bootstrap pode fazer milagres. Instale-o como um pacote:

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

Importe o Bootstrap no arquivo CSS (também limpamos o arquivo):

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

Faça o mesmo para o arquivo JS:

patch_file
 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();

O sistema de formulários do Symfony suporta o Bootstrap nativamente com um tema especial, habilite-o:

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

Estilizando o HTML

Estamos agora prontos para estilizar a aplicação. Baixe e extraia o arquivo na raiz do projeto:

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

Dê uma olhada nos templates, você pode aprender um truque ou dois sobre o Twig.

Construindo Assets

Uma mudança importante ao usar o Webpack é que os arquivos CSS e JS não podem ser utilizados diretamente pela aplicação. Eles precisam ser “compilados” primeiro.

No desenvolvimento, a compilação dos assets pode ser feita através do comando encore dev:

1
$ symfony run yarn encore dev

Em vez de executar o comando toda vez que houver uma alteração, envie-o para segundo plano e deixe-o acompanhar as alterações no JS e no CSS:

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

Reserve um tempo para descobrir as mudanças visuais. Dê uma olhada no novo design em um navegador.

O formulário de login gerado agora possui estilo, assim como o bundle Maker usa classes CSS do Bootstrap por padrão:

Em produção, a SymfonyCloud detecta automaticamente que você está usando o Encore e compila os assets para você durante a fase de construção.


  • « Previous Passo 21: Armazenando em Cache para Desempenho
  • Next » Passo 23: Redimensionando Imagens

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