Webpack でユーザーインタフェースにスタイリングする

Sass を使用する

生の CSS を使うのではなく、 Sass を使ってみましょう:

1

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

1
2
3
4
5
6
7
8

--- i/assets/app.js
+++ w/assets/app.js
@@ -6,4 +6,4 @@
  */

 // any CSS you import will output into a single css file (app.css in this case)
-import './styles/app.css';
+import './styles/app.scss';

Sass ローダーをインストールしてください:

1

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

Webpack で Sass ローダーを有効化してください:

1
2
3
4
5
6
7
8
9
10
11

--- i/webpack.config.js
+++ w/webpack.config.js
@@ -57,7 +57,7 @@ Encore
     })

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

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

インストールするパッケージはどうしたら分かるのでしょうか。もしパッケージインストール無しでアセットをビルドしようとすると、Encore は .scss ファイルをロードするのに必要な依存パッケージをインストールする npm install コマンドが必要であることをエラーメッセージで表示してくれます。

Bootstrap でレバレッジする

適切なデフォルト値でレスポンシブな Webサイトをビルドするには、 Bootstrap のような CSS フレームワークが良いでしょう。Bootstrap をパッケージとしてインストールしてください:

1

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

CSSファイルで Bootstrap を require してください（ファイルをクリーンアップもしています）:

1
2
3
4
5
6
7

--- i/assets/styles/app.scss
+++ w/assets/styles/app.scss
@@ -1,3 +1 @@
-body {
-    background-color: lightgray;
-}
+@import '~bootstrap/scss/bootstrap';

JS ファイルにも同じようにしてください:

1
2
3
4
5
6
7
8
9
10

--- i/assets/app.js
+++ w/assets/app.js
@@ -7,3 +7,7 @@

 // 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';
+
+bsCustomFileInput.init();

Symfony のフォームシステムは、特別なテーマでBootstrap をネイティブでサポートしていますので、有効にしてください:

1
2

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

HTML をスタイリングする

アプリケーションをスタイリングする準備ができましたので、アーカイブをダウンロードし、プロジェクトのルートディレクトリに展開してください:

1
2
3

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

テンプレートを見ると、少し Twig にトリックがあるのに気づくと思います。

アセットをビルドする

Webpack 使用することでの主な違いは、アプリケーションがCSS や JS ファイルを直接使うことができないことです。最初に "コンパイル"してあげる必要があります。

開発環境では、 encore dev コマンドでアセットをコンパイルすることができます:

1

$ symfony run npm run dev

JS や CSS の変更時にコマンドを毎回実行するのではなく、JS やCSSの変更を検知して、バックグラウンドで実行させましょう:

1

$ symfony run -d npm run watch

少し時間をかけて視覚的な変更を発見してみてください。ブラウザで新しいデザインを見てみてください。

Maker バンドルは、デフォルトで Bootstrap CSS クラスを使用していますので、生成されたログインフォームはスタイルが適用されているはずです:

本番では、 Platform.sh は自動的に Encore を使用するかを検知し、ビルドフェーズでアセットをコンパイルします。