Question

我正在使用Symfony 4进行练习，并且试图通过CSS显示图像。现在，当我运行npm run dev时，它仅编译CSS和JS文件，而不编译图像。我将所有图像都移到了/assets/img/文件夹中。

现在，我很想知道如何使用CSS路径来适应Symfony环境。我只找到了与Symfony 2和3有关的解决方案，这些解决方案在此版本中不起作用。我的CSS是：

.about-solution-about {
  background: url(/img/placeholder.jpg) no-repeat center;
  background-size: cover;
  width: 540px;
  height: 330px;
  padding-top: 40px;
}

图像现在位于以下位置：project/assets/img/placeholder.jpg

我需要通过编译的app.css文件访问公用文件夹中的该图像。我知道app.css和app.js文件已编译并放置在/public/build/文件夹中。

现在，如何将所有图像资产编译或构建到/public/build/文件夹中，并在CSS中重新调用这些文件？

Answer 1

/assets/文件夹中常规CSS和JS资产的构建由项目目录中的 Webpack Encore webpack.config.js文件处理。

在终端中运行npm run dev命令时，文件app.css和app.js被编译并放置在/public/build/文件夹中。

如果您还希望将图像包含在/public/build/文件夹中，则可以使用 Copy Webpack Plugin 。

首先，在终端中使用npm i -D copy-webpack-plugin命令安装插件。

然后在您的主项目文件夹中编辑webpack.config.js文件。在第一行下，添加：

var CopyWebpackPlugin = require('copy-webpack-plugin');

然后在Encore部分以分号;结尾之前，添加：

.addPlugin(new CopyWebpackPlugin([
        { from: './assets/img', to: 'img' }
    ]))

整个文件here的

JSFiddle 示例。

现在，请确保您在/assets/img/文件夹中有图像。

运行npm run dev命令，您会发现{assets}文件夹中的所有图像现在在/public/build/img/文件夹中可用！

在您的示例中，CSS中的正确路径现在为：

background: url(/build/img/placeholder.jpg) no-repeat center;

Answer 2

您可以尝试在样式表树枝标签/基本树枝/中使用cssrewrite过滤器：

{% stylesheets 'source to css files' filter='cssrewrite' %}

{% endstylesheets %}

Answer 3

我认为无法在纯CSS代码中使用Assets。我建议您在实际可以的地方在HTML中设置background参数。希望你能弄清楚！

在Symfony 4中设置（CSS背景图像）图像资产

3 个答案: