我遇到了非常非常相同的问题。
简而言之:
- 愿意在“内部”目录中拥有原始 CSS (Resources/assets/css/a.css)
- 愿意将图像放在“公共”目录 (Resources/public/images/devil.png)
- 愿意那根树枝接受那个 CSS,将它重新编译成 web/css/a.css 并使它指向 /web/bundles/mynicebundle/images/devil.png 中的图像
我已经对以下所有可能的(理智的)组合进行了测试:
- @notation,相对符号
- 用 cssrewrite 解析,没有它
- CSS图像背景与直接 <img> 标签 src= 到与 CSS 完全相同的图像
- CSS 用资产解析,也没有用资产直接输出解析
- 所有这一切都通过尝试使用 CSS 的“公共目录”(as
Resources/public/css
)和“私人”目录(as Resources/assets/css
)而倍增。
这给了我在同一根树枝上的总共14种组合,这条路线是从
- “/app_dev.php/”
- “/app.php/”
- 和 ”/”
因此给出 14 x 3 = 42 次测试。
此外,所有这些都在子目录中进行了测试,因此无法通过提供绝对 URL 来愚弄,因为它们根本不起作用。
测试是两个未命名的图像,然后是从公共文件夹构建的 CSS 命名为“a”到“f”的 div,并为从内部路径构建的那些命名为“g”到“l”。
我观察到以下情况:
14 个测试中只有 3 个在三个 URL 上得到充分展示。NONE 来自“内部”文件夹(资源/资产)。拥有备用 CSS PUBLIC 并从那里使用资产构建是一个先决条件。
这些是结果:
结果使用 /app_dev.php/ 启动

使用 /app.php/ 启动的结果

结果以 / 启动

所以......只有 - 第二张图片 - Div B - Div C 是允许的语法。
这里有 TWIG 代码:
<html>
<head>
{% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{# First Row: ABCDEF #}
<link href="{{ '../bundles/commondirty/css_original/a.css' }}" rel="stylesheet" type="text/css" />
<link href="{{ asset( 'bundles/commondirty/css_original/b.css' ) }}" rel="stylesheet" type="text/css" />
{% stylesheets 'bundles/commondirty/css_original/c.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets 'bundles/commondirty/css_original/d.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '@CommonDirtyBundle/Resources/public/css_original/e.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '@CommonDirtyBundle/Resources/public/css_original/f.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{# First Row: GHIJKL #}
<link href="{{ '../../src/Common/DirtyBundle/Resources/assets/css/g.css' }}" rel="stylesheet" type="text/css" />
<link href="{{ asset( '../src/Common/DirtyBundle/Resources/assets/css/h.css' ) }}" rel="stylesheet" type="text/css" />
{% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/i.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/j.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '@CommonDirtyBundle/Resources/assets/css/l.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
</head>
<body>
<div class="container">
<p>
<img alt="Devil" src="../bundles/commondirty/images/devil.png">
<img alt="Devil" src="{{ asset('bundles/commondirty/images/devil.png') }}">
</p>
<p>
<div class="a">
A
</div>
<div class="b">
B
</div>
<div class="c">
C
</div>
<div class="d">
D
</div>
<div class="e">
E
</div>
<div class="f">
F
</div>
</p>
<p>
<div class="g">
G
</div>
<div class="h">
H
</div>
<div class="i">
I
</div>
<div class="j">
J
</div>
<div class="k">
K
</div>
<div class="l">
L
</div>
</p>
</div>
</body>
</html>
容器.css:
div.container
{
border: 1px solid red;
padding: 0px;
}
div.container img, div.container div
{
border: 1px solid green;
padding: 5px;
margin: 5px;
width: 64px;
height: 64px;
display: inline-block;
vertical-align: top;
}
还有 a.css、b.css、c.css 等:都一样,只是改变了颜色和 CSS 选择器。
.a
{
background: red url('../images/devil.png');
}
“目录”结构是:
目录

这一切都来了,因为我不希望个别原始文件暴露在公众面前,特别是如果我想玩“less”过滤器或“sass”或类似的东西……我不希望我的“原件”被公开,只有编了一个。
但也有好消息。如果您不想在公共目录中拥有“备用 CSS”……请不要使用 . 安装它们--symlink
,而是真正制作副本。一旦“assetic”构建了复合 CSS,您就可以从文件系统中删除原始 CSS,并保留图像:
编译过程

注意我这样做是为了--env=prod
环境。
最后的一些想法:
可以通过将图像放在Git或Mercurial的“public”目录中并将“css”放在“assets”目录中来实现这种期望的行为。也就是说,与其将它们放在目录中所示的“公共”中,不如想象 a、b、c... 位于“资产”而不是“公共”中,而不是让您的安装程序/部署程序(可能是Bash脚本)在执行之前将 CSS 临时放在“公共”目录中,然后,然后,然后在assets:install
执行之后自动从公共目录中删除 CSS 。这将完全实现问题中所需的行为。assets:install
assetic:dump
assetic:dump
另一个(如果可能的话未知)解决方案是探索“assets:install”是否只能将“public”作为来源,或者也可以将“assets”作为发布来源。在开发时使用该--symlink
选项安装时会有所帮助。
此外,如果我们要编写从“公共”目录中删除的脚本,那么将它们存储在单独的目录(“资产”)中的需求就消失了。它们可以存在于我们的版本控制系统中的“public”中,因为它们会在部署到公众时被丢弃。这也允许--symlink
使用。
但是无论如何,现在注意:由于现在原件不再存在(rm -Rf
),因此只有两个解决方案,而不是三个。工作 div "B" 不再工作,因为它是一个asset() 调用,假设有原始资产。只有“C”(编译后的)可以工作。
所以......只有一个最终的赢家:Div“C”完全允许它在主题中提出的要求:要编译,尊重图像的路径并且不要将原始来源暴露给公众。
获胜者是C
