Step 22: Styling the User Interface with Webpack

Styling the User Interface with Webpack

A full Webpack environment has been created for you: 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.

Instead of using plain CSS, let’s switch to :

  1. $ mv assets/styles/app.css assets/styles/app.scss

patch_file

  1. --- a/assets/app.js
  2. +++ b/assets/app.js
  3. @@ -6,7 +6,7 @@
  4.   */
  6. -import './styles/app.css';
  7. +import './styles/app.scss';
  9.  // start the Stimulus application
  10.  import './bootstrap';

Install the Sass loader:

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

And enable the Sass loader in webpack:

patch_file

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 yarn add command needed to install dependencies to load .scss files.

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

Require Bootstrap in the CSS file (we have also cleaned up the file):

patch_file

  1. --- a/assets/styles/app.scss
  2. +++ b/assets/styles/app.scss
  3. @@ -1,3 +1 @@
  4. -body {
  5. -    background-color: lightgray;
  6. -}
  7. [email protected] '~bootstrap/scss/bootstrap';

Do the same for the JS file:

patch_file

  1. --- a/assets/app.js
  2. +++ b/assets/app.js
  4.  // any CSS you import will output into a single css file (app.css in this case)
  5.  import './styles/app.scss';
  6. +import 'bootstrap';
  7. +import bsCustomFileInput from 'bs-custom-file-input';
  9.  // start the Stimulus application
  10.  import './bootstrap';
  11. +
  12. +bsCustomFileInput.init();

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

config/packages/twig.yaml

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

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

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

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.

  1. $ symfony run yarn encore 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:

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

Step 22: Styling the User Interface with Webpack - 图2

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

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

Going Further

This work, including the code samples, is licensed under a license.