Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • SensioLabs Professional services to help you with Symfony
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by
  1. Home
  2. Documentation
  3. Symfony: The Fast Track
  4. Japanese
  5. Webpack でユーザーインタフェースにスタイリングする
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud

Table of Contents

  • Sass を使用する
  • Bootstrap でレバレッジする
  • HTML をスタイリングする
  • アセットをビルドする

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

 // start the Stimulus application
 import './bootstrap';

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

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

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

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

インストールするパッケージはどうしたら分かるのでしょうか。もしパッケージインストール無しでアセットをビルドしようとすると、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
--- a/assets/styles/app.scss
+++ b/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
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();

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

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

HTML をスタイリングする

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

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

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

アセットをビルドする

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

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

1
$ symfony run npm run dev

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

1
$ symfony run -d npm run watch

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

/
/conference/amsterdam-2019

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

/login

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

より深く学ぶために

  • Webpack ドキュメント;
  • Symfony Webpack Encore ドキュメント;
  • SymfonyCasts Webpack Encore チュートリアル.
Previous page パフォーマンス向上のためにキャッシュする
Next page 画像をリサイズする
This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.
TOC
    Version
    Version:
    Locale:

    This book is backed by:

    see all backers

    Symfony footer

    Avatar of gstapinato, a Symfony contributor

    Thanks gstapinato for being a Symfony contributor

    1 commit • 98 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