Symfony2 和 Assetic - 我的 CSS 中引用的图像不会加载答案

【问题标题】：Symfony2 and Assetic - Images referenced in my CSS won't loadSymfony2 和 Assetic - 我的 CSS 中引用的图像不会加载
【发布时间】：2012-11-26 21:16:48
【问题描述】：

我正在尝试使用一个 CSS 精灵表，但我的 CSS 文件无法“看到”图像。我按照here 提供的答案无济于事。我的包结构是：

src/
    vendor/
        project/
            bundle/
                Resources/
                    public/
                        css/
                            normalize.css
                            static.css
                        images/
                            sprites.jpg

我已经完成了：

$ app/console assets:install
Installing assets using the hard copy option
Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework
Installing assets for MajorProductions\SewingDiva\SiteBundle into web/bundles/majorproductionssewingdivasite
Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution

和：

$ app/console assetic:dump
Dumping all dev assets.
Debug mode is on.

22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_normalize_1.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_static_2.css

不知道还能做什么......

【问题讨论】：

标签： css symfony css-sprites assetic

【解决方案1】：

通过更改参考来解决它：

{% block styles %}
    {% stylesheets '@MajorProductionsSewingDivaSiteBundle/Resources/public/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

到：

{% block styles %}
    {% stylesheets 'bundles/majorproductionssewingdivasite/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

尽管在 Symfony 官方文档中使用了它，但显然第一个版本中的自动魔法参考并不是要走的路。

【讨论】：

使用 Symfony 2.1，我发现 KevinM1 的答案是正确的并且对我有用......文档似乎确实缺乏回答这个问题。
该解决方案有效，但是，请注意，在 Resources/public/folder 中修改 CSS 中的某些样式时，它不会反映所做的更改。您需要直接在 web 文件夹或 Resources 文件夹中进行修改，然后在每次修改时重新发布资产。

【解决方案2】：

@KevinM1

显然，第一个版本中的自动魔法参考并不是要走的路，尽管它 > 已在 Symfony 官方文档中使用。

它是here（法语，但其他语言的等效文档肯定存在）

【讨论】：

English doc link

【解决方案3】：

嗯，来自the documentation：

这是一个关键点：一旦您让 Assetic 处理您的资产，文件就会从不同的位置提供。这可能会导致通过相对路径引用图像的 CSS 文件出现问题。不过，这可以通过使用 cssrewrite 过滤器来解决，该过滤器会更新 CSS 文件中的路径以反映它们的新位置。

所以你需要启用cssrewrite 过滤器：

# app/config/config.yml
assetic:
    filters:
        cssrewrite: ~

并在您的 stylesheets 块中使用它：

{% stylesheets '@AcmeProjectBundle/Resources/css' filter='cssrewrite' %}
    <link href="{{ asset_url }}">
{% endstylesheets %}

【讨论】：

好吧，就像我说的，我遵循了另一个主题中的答案，即使用 cssrewrite 过滤器，但这并没有解决问题。进一步调查显示，Assetic 默认创建自己的 web/css 目录。使用该过滤器，它正在寻找不存在的 web/Resources/public/images/。