Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • SensioLabs Professional services to help you with Symfony
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by
  1. Home
  2. Documentation
  3. Symfony: The Fast Track
  4. Polish
  5. Stylowanie interfejsu użytkownika z wykorzystaniem narzędzia Webpack

Stylowanie interfejsu użytkownika z wykorzystaniem narzędzia Webpack

Nie poświęciliśmy zbyt wiele czasu na projektowanie interfejsu użytkownika. Aby go profesjonalnie ostylować, użyjemy nowoczesnego zestawu narzędzi, opartego na Webpacku. Aby ułatwić jego integrację z naszą aplikacją zainstalujemy Webpack Encore:

Pełne środowisko Webpack zostało przygotowane: package.json i webpack.config.js zostały wygenerowane i zawierają dobrą domyślną konfigurację. Otwórz plik webpack.config.js – używa on abstrakcji Encore do konfiguracji Webpacka.

Plik package.json definiuje kilka ciekawych poleceń, których będziemy używać przez cały czas.

Katalog assets zawiera główne punkty wejścia dla zasobów projektu: styles/app.css oraz app.js.

Używanie Sass

Zamiast używać zwykłego CSS, skorzystajmy z 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';

Zainstaluj moduł ładowania Sass:

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

I uruchom go w Webpacku:

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

Skąd wiedziałem, które pakiety zainstalować? Gdybyśmy spróbowali zbudować nasze zasoby bez nich, Encore wyświetliłby komunikat błędu sugerujący uruchomienie polecenia yarn add potrzebnego do instalacji zależności służących do ładowania plików .scss.

Wykorzystanie Bootstrapa

Potrzebujemy solidnych podstaw do zbudowania responsywnej strony internetowej. Framework CSS, taki jak Bootstrap spełnia te warunki. Zainstaluj go jako pakiet (ang. package):

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

Dołącz (ang. require) Bootstrapa w pliku CSS (wyczyściliśmy również ten plik):

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

Zrób to samo w przypadku pliku 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();

System formularzy Symfony obsługuje natywnie Bootstrapa ze specjalnym motywem, włącz go:

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

Stylowanie HTML

Jesteśmy teraz gotowi do stylowania aplikacji. Pobierz i rozpakuj archiwum w katalogu głównym projektu:

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

Spójrz na szablony Twig, znajdziesz w nich kilka ciekawych rozwiązań.

Budowanie zasobów (ang. assets)

Jedną z głównych różnic w korzystaniu z Webpacka jest to, że pliki CSS i JS nie mogą być wykorzystywane bezpośrednio przez aplikację. Najpierw trzeba je "skompilować".

Podczas rozwoju aplikacji, kompilacja zasobów może być wykonana za pomocą polecenia encore dev:

1
$ symfony run yarn dev

Zamiast wykonywać polecenie za każdym razem, gdy wystąpi zmiana, uruchom je w tle i pozwól mu obserwować zmiany w plikach JS i CSS:

1
$ symfony run -d yarn dev --watch

Poświęć czas na odkrycie zmian wizualnych. Przyjrzyj się nowemu wyglądowi w przeglądarce.

/
/conference/amsterdam-2019

Wygenerowany formularz logowania jest teraz ostylowany, a Maker Bundle używa domyślnie klas CSS Bootstrapa:

/login

W środowisku produkcyjnym Platform.sh automatycznie wykrywa, że używasz Encore i kompiluje zasoby za Ciebie podczas fazy budowania aplikacji.

Idąc dalej

  • Dokumentacja Webpack;
  • Dokumentacja Symfony Webpack Encore;
  • Samouczek SymfonyCasts Webpack Encore.
Previous page Użycie pamięci podręcznej w celu zwiększenia wydajności
Next page Zmienianie rozmiaru obrazów
This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.
TOC
    Version

    Symfony 5.4 is backed by

    Peruse our complete Symfony & PHP solutions catalog for your web development needs.

    Peruse our complete Symfony & PHP solutions catalog for your web development needs.

    Save your teams and projects before they sink

    Save your teams and projects before they sink

    Version:
    Locale:
    ebook

    This book is backed by:

    see all backers

    Symfony footer

    Avatar of sarah-eit, a Symfony contributor

    Thanks sarah-eit for being a Symfony contributor

    2 commits • 94 lines changed

    View all contributors that help us make Symfony

    Become a Symfony contributor

    Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

    Learn how to contribute

    Symfony™ is a trademark of Symfony SAS. All rights reserved.

    • What is Symfony?

      • What is Symfony?
      • Symfony at a Glance
      • Symfony Components
      • Symfony Releases
      • Security Policy
      • Logo & Screenshots
      • Trademark & Licenses
      • symfony1 Legacy
    • Learn Symfony

      • Symfony Docs
      • Symfony Book
      • Reference
      • Bundles
      • Best Practices
      • Training
      • eLearning Platform
      • Certification
    • Screencasts

      • Learn Symfony
      • Learn PHP
      • Learn JavaScript
      • Learn Drupal
      • Learn RESTful APIs
    • Community

      • Symfony Community
      • SymfonyConnect
      • Events & Meetups
      • Projects using Symfony
      • Contributors
      • Symfony Jobs
      • Backers
      • Code of Conduct
      • Downloads Stats
      • Support
    • Blog

      • All Blog Posts
      • A Week of Symfony
      • Case Studies
      • Cloud
      • Community
      • Conferences
      • Diversity
      • Living on the edge
      • Releases
      • Security Advisories
      • Symfony Insight
      • Twig
      • SensioLabs Blog
    • Services

      • SensioLabs services
      • Train developers
      • Manage your project quality
      • Improve your project performance
      • Host Symfony projects

      Powered by

    Follow Symfony