Symfony
sponsored by SensioLabs
Menu
  • About
  • Documentation
  • Screencasts
  • Cloud
  • Certification
  • Community
  • Businesses
  • News
  • Download
  1. Home
  2. Documentation
  3. Symfony: The Fast Track
  4. English
  5. Styling the User Interface with Webpack
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud
Search by Algolia

Table of Contents

  • Using Sass
  • Leveraging Bootstrap
  • Styling the HTML
  • Building Assets

Styling the User Interface with Webpack

Styling the User Interface with Webpack

We have spent no time on the design of the user interface. To style like a pro, we will use a modern stack, based on Webpack. And to add a Symfony touch and ease its integration with the application, let's use Webpack Encore:

1
$ symfony composer req encore

A full Webpack environment has been created for you: package.json and webpack.config.js have been generated and contain good default configuration. Open webpack.config.js, it uses the Encore abstraction to configure Webpack.

The package.json file defines some nice commands that we will use all the time.

The assets directory contains the main entry points for the project assets: styles/app.css and app.js.

Using Sass

Instead of using plain CSS, let's switch to 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';

Install the Sass loader:

1
$ npm install node-sass sass-loader --save-dev

And enable the Sass loader in webpack:

1
2
3
4
5
6
7
8
9
10
11
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -57,7 +57,7 @@ Encore
     })

     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()

     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()

How did I know which packages to install? If we had tried to build our assets without them, Encore would have given us a nice error message suggesting the npm install command needed to install dependencies to load .scss files.

Leveraging Bootstrap

To start with good defaults and build a responsive website, a CSS framework like Bootstrap can go a long way. Install it as a package:

1
$ npm install bootstrap @popperjs/core bs-custom-file-input --save-dev

Require Bootstrap in the CSS file (we have also cleaned up the 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;
-}
+@import '~bootstrap/scss/bootstrap';

Do the same for the JS 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();

The Symfony form system supports Bootstrap natively with a special theme, enable it:

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

Styling the HTML

We are now ready to style the application. Download and expand the archive at the root of the project:

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

Have a look at the templates, you might learn a trick or two about Twig.

Building Assets

One major change when using Webpack is that CSS and JS files are not usable directly by the application. They need to be "compiled" first.

In development, compiling the assets can be done via the encore dev command:

1
$ symfony run npm run dev

Instead of executing the command each time there is a change, send it to the background and let it watch JS and CSS changes:

1
$ symfony run -d npm run watch

Take the time to discover the visual changes. Have a look at the new design in a browser.

/
/conference/amsterdam-2019

The generated login form is now styled as well as the Maker bundle uses Bootstrap CSS classes by default:

/login

For production, Platform.sh automatically detects that you are using Encore and compiles the assets for you during the build phase.

Going Further

  • Webpack docs;
  • Symfony Webpack Encore docs;
  • SymfonyCasts Webpack Encore tutorial.
Previous page Caching for Performance
Next page Resizing Images
This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.
We stand with Ukraine.
Version:
Locale:

This book is backed by:

see all backers

↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

Avatar of Caliendo Julien, a Symfony contributor

Thanks Caliendo Julien for being a Symfony contributor

1 commit • 23 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?
    • Symfony at a Glance
    • Symfony Components
    • Case Studies
    • 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
    • SymfonyConnect
    • Support
    • How to be Involved
    • Code of Conduct
    • Events & Meetups
    • Projects using Symfony
    • Downloads Stats
    • Contributors
    • Backers
  • Blog
    • Events & Meetups
    • A week of symfony
    • Case studies
    • Cloud
    • Community
    • Conferences
    • Diversity
    • Documentation
    • Living on the edge
    • Releases
    • Security Advisories
    • SymfonyInsight
    • Twig
    • SensioLabs
  • Services
    • SensioLabs services
    • Train developers
    • Manage your project quality
    • Improve your project performance
    • Host Symfony projects
    Deployed on
Follow Symfony
Search by Algolia