📅 最后修改于: 2023-12-03 15:25:07.650000 🧑 作者: Mango
如果您正在使用 Symfony 框架，那么很有可能您需要安装 webpack encore，这是一个用于打包和管理前端资源的工具。这里我们介绍如何使用 webpack encore 来处理 CSS 文件。
在开始之前，我们需要先安装一些依赖。让我们打开终端，跳转到 Symfony 项目的根目录并运行以下命令：
# 使用 composer 安装依赖
composer require symfony/webpack-encore-bundle
# 安装 node.js
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
# 安装 yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install -y yarn
我们将创建一个名为 app.css 的文件，它将存储网站的全局样式。在您的 Symfony 项目根目录中创建一个名为 assets/css 的目录，并在其中创建一个名为 app.css 的文件：
mkdir -p assets/css
touch assets/css/app.css
接下来，打开 app.css 文件并添加一些 CSS 样式（例如，在这个例子中我们将所有 h1 元素的字体颜色设置为红色）：
h1 {
color: red;
}
使用 webpack encore，您可以通过编写简单的 JavaScript 代码自定义 CSS（以及其他依赖关系）的打包过程。让我们首先创建 webpack.config.js 文件：
touch webpack.config.js
接下来，在我们的 webpack.config.js 文件中，引入 webpack 和 webpack-encore 并定义一个基本的 webpack 配置（此处我们只需要简单地指定输入和输出文件的位置）：
const Encore = require('@symfony/webpack-encore')
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/css/app.css')
module.exports = Encore.getWebpackConfig()
在上面的代码中，我们定义了一个名为 app 的入口，该入口指向我们刚刚创建的 app.css 文件。使用给定的路径，Webpack 把 app.css 编译到 public/build/ 目录。
在终端中，运行以下命令来编译您的 assets：
yarn install
yarn encore dev
这将执行两个操作：
package.json 文件定义的依赖项；public/build/ 目录。此处我们使用 yarn encore dev 命令来编译所有的 assets 文件。此命令会在 /build 目录下生成所有相关的文件。如果您向浏览器输出 CSS 文件，您将需要添加引用 /build/app.css 的标记。
例如，如果您已经定义了一个将渲染 HTML 页面的 Twig 模板，您可以使用以下代码片段信进入 HTML 文档的头部来引用CSS文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<link href="{{ asset('build/app.css') }}" rel="stylesheet">
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
这样，我们通过 webpack encore 成功地创建了 app.css 文件，并成功地将其编译为一个可部署的资源。