ステップ 22: 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
ディレクトリには、styles/app.css
や app.js
のようなプロジェクトのアセットのメインエントリーポイントが入っています。
Sass を使用する¶
生の CSS を使うのではなく、 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';
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';
|
Sass ローダーをインストールしてください:
1 | $ yarn add node-sass sass-loader --dev
|
Webpack で Sass ローダーを有効化してください:
1 2 3 4 5 6 7 8 9 10 11 | --- 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 してください(ファイルをクリーンアップもしています):
1 2 3 4 5 6 7 | --- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -1,3 +1 @@
-body {
- background-color: lightgray;
-}
[email protected] '~bootstrap/scss/bootstrap';
|
JS ファイルにも同じようにしてください:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | --- a/assets/app.js
+++ b/assets/app.js
@@ -7,8 +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';
-// 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/app.js');
+bsCustomFileInput.init();
|
Symfony のフォームシステムは、特別なテーマでBootstrap をネイティブでサポートしていますので、有効にしてください:
1 2 | twig:
form_themes: ['bootstrap_4_layout.html.twig']
|
HTML をスタイリングする¶
アプリケーションをスタイリングする準備ができましたので、アーカイブをダウンロードし、プロジェクトのルートディレクトリに展開してください:
1 2 3 | $ php -r "copy('https://symfony.com/uploads/assets/guestbook-5.0.zip', 'guestbook-5.0.zip');"
$ unzip -o guestbook-5.0.zip
$ rm guestbook-5.0.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 を使用するかを検知し、ビルドフェーズでアセットをコンパイルします。
- « Previous ステップ 21: パフォーマンス向上のためにキャッシュする
- Next » ステップ 23: 画像をリサイズする
This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.