ステップ 22: Webpack でユーザーインタフェースにスタイリングする

5.0 version

Maintained

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

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

ここまで、まだユーザーインタフェースのデザインをあまりしてきていません。プロのようにスタイルをするのに、Webpack ベースのモダンなスタックを使ってみましょう。アプリケーションとの統合をやりやすくするために Symfony touch を追加してください。 Webpack Encore をインストールしましょう:

1	$ symfony composer req encore

完全な Webpack 環境は、既に作成されており、適切なデフォルトの設定で package.json と webpack.config.js が生成されています。 Webpack を設定するのに Encore の設定をする webpack.config.js を開いてください。

package.json ファイルに、毎回使う便利なコマンドが定義されています。

assets ディレクトリには、css/app.css や js/app.js のようなプロジェクトのアセットのメインエントリーポイントが入っています。

Sass を使用する¶

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

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

patch_file¶

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

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

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

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

patch_file¶

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

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

Bootstrap でレバレッジする¶

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

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

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

patch_file¶

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

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

patch_file¶

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

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

config/packages/twig.yaml¶

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

HTML をスタイリングする¶

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

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

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

アセットをビルドする¶

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

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

1	$ symfony run yarn encore dev

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

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

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

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

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

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