Question

＆＃34; Documentation＆＃34;提供的答案不再在Symfony 3中工作了。所以我问下一个版本的问题：

我想从CSS中提取背景图片，我该怎么做？

我尝试了什么：

/* src/SiteBundle/Resources/public/css/style.css */
#element {
  background: url('../images/image.jpg');
}

图片位于src/SiteBundle/Resources/public/images/image.jpg。

资产已正确安装console asset:install --symlink，全部为绿色。

使用composer手动安装Assetic。

CSS加载了：

<!-- app/Resources/views/base.html.twig -->
{% stylesheets '@SiteBundle/Resources/public/css/*.css' filter='cssrewrite' %}
  <link rel="stylesheet" href="{{ asset_url }}" type="text/css">
{% endstylesheets %}

我得到了什么：

当我查看浏览器检查器时，它告诉我css属性是

background: url('../../Resources/public/images/image.jpg')

显然不起作用。

我试图修复它：

我尝试将CSS背景属性更改为url('images/image.jpg')，知道它不会起作用，但要弄清楚它是如何处理链接的。

浏览器检查员告诉我现在链接url('../../Resources/public/css/images/image.jpg')，告诉我我无法更改../../Resources/public/部分。

我该怎么做呢？

在回答之前你应该问自己的奖金问题：当我从dev切换到prod时，你的回答会有效吗？

Answer 1

使用cssrewrite过滤器时，请勿使用@AppBundle语法引用CSS文件。 http://symfony.com/doc/current/cookbook/assetic/asset_management.html#fixing-css-paths-with-the-cssrewrite-filter

也：

最佳实践：

将您的资产存储在网络/目录中。

所以你可能应该使用：

{% stylesheets 'bundles/site/css/*.css' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" type="text/css">
{% endstylesheets %}

这适用于prod和dev吗？我真的不知道，因为我正在使用gulp来管理资产。

Symfony 3使用CSS设置背景图像

1 个答案: