步骤 22: 用 Webpack 来为用户界面设置样式

我们还没有在设计用户界面上花过时间。为了让样式更专业，我们要使用一个基于 Webpack 的现代工具集。这个工具集增加了一些针对 Symfony 的定制，并且可以与应用方便地整合，它就是 Webpack Encore 包，我们来安装它：

  1. $ symfony composer req encore

一个完整的 Webpack 环境已经为你创建好：package.json 和 webpack.config.js 文件已经生成，并且包含良好的默认配置。打开 webpack.config.js，你会看到它使用了 Encore 抽象来配置 Webpack。

package.json 文件定义了一些很棒的命令，我们会一直用到它们。

assets 目录下包含了项目前端资源的主入口：styles/app.css 和 app.js 文件。

使用 Sass

我们不用纯 CSS，而是切换到 Sass：

  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.  // any CSS you import will output into a single css file (app.css in this case)
  7. -import './styles/app.css';
  8. +import './styles/app.scss';
  10.  // start the Stimulus application
  11.  import './bootstrap';

安装 Sass 加载器：

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

在 webpack 里启用 Sass 加载器：

patch_file

  1. --- a/webpack.config.js
  2. +++ b/webpack.config.js
  3. @@ -56,7 +56,7 @@ Encore
  4.      })
  6.      // enables Sass/SCSS support
  7. -    //.enableSassLoader()
  8. +    .enableSassLoader()
  10.      // uncomment if you use TypeScript
  11.      //.enableTypeScriptLoader()

我是怎么知道要安装哪些包的？如果我们没安装那些包就去尝试构建资源的话，Encore 会展示给我们一个友好的错误消息，提示我们需要执行的 yarn add 命令，这个命令用来安装加载 .scss 文件所需的依赖包。

使用 Bootstrap

诸如 Bootstrap 这样的 CSS 框架可以在很大程度上帮助我们从良好的默认样式开始构建一个响应式网站：

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

在 CSS 文件中引入 Bootstrap（我们也对这个文件做了些清理）：

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

对 JS 文件也做同样处理：

patch_file

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

Symfony 的表单系统通过一个特殊的表单主题对 Bootstrap 提供原生支持，我们来启用这个表单主题：

config/packages/twig.yaml

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

对 HTML 设置样式

现在我们准备好了为应用程序设置样式。下载这个打包文件，并在项目的根目录中解压：

  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

查看下模板文件，你可能会学到一两个 Twig 的小技巧。

构建资源

使用 Webpack 带来的主要改变之一是 CSS 和 JS 文件不能在应用中直接使用了。它们需要先经过”编译“。

开发环境中，编译资源可以用 encore dev 命令：

  1. $ symfony run yarn encore dev

把这个命令改为后台执行，让它来观察 JS 和 CSS 的改变，而不是每次更新文件时都去执行它：

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

花点时间看一下视觉效果上的改变。在浏览器里看一下新的设计。

步骤 22: 用 Webpack 来为用户界面设置样式 - 图1

步骤 22: 用 Webpack 来为用户界面设置样式 - 图2

样式也应用到了生成的登录表单上，因为 Maker Bundle 默认使用 Bootstrap 的 CSS 类：

步骤 22: 用 Webpack 来为用户界面设置样式 - 图3

在生产环境中，SymfonyCloud 会自动检测到你使用了 Encore，并且在构建阶段为你自动编译资源。

深入学习

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