Symfony 2中CSS文件中的资产路径
apf*_*box 100 css php symfony assetic
问题
我有一个CSS文件,其中包含一些路径(图像,字体等url(..)).
我的路径结构是这样的:
...
+-src/
| +-MyCompany/
| +-MyBundle/
| +-Resources/
| +-assets/
| +-css/
| +-stylesheets...
+-web/
| +-images/
| +-images...
...
我想在样式表中引用我的图像.
第一解决方案
我将CSS文件中的所有路径都更改为绝对路径.这不是解决方案,因为应用程序应该(并且必须!)也在子目录中工作.
二解决方案
使用Assetic filter="cssrewrite".
所以我将CSS文件中的所有路径都更改为
url("../../../../../../web/images/myimage.png")
表示从我的资源目录到/web/images目录的实际路径.这不起作用,因为cssrewrite生成以下代码:
url("../../Resources/assets/")
这显然是错误的道路.
assetic:dump创建此路径后,仍然存在错误:
url("../../../web/images/myimage.png")
Assetic的枝条代码:
{% stylesheets
'@MyCompanyMyBundle/Resources/assets/css/*.css'
filter="cssrewrite"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
当前(第三)解决方案
由于所有CSS文件最终都存在/web/css/stylexyz.css,我将CSS文件中的所有路径都更改为相对:
url("../images/myimage.png")
除了在dev环境中之外,这个(坏)解决方案是有效的:CSS路径是/app_dev.php/css/stylexyz.css因此得到的图像路径/app_dev.php/images/myimage.png,这导致了一个NotFoundHttpException.
有更好的工作解决方案吗？
Xav*_*ero 194
我遇到了非常相同的问题.
简而言之:
- 愿意在"内部"目录中使用原始CSS(Resources/assets/css/a.css)
- 愿意将图像放在"公共"目录中(Resources/public/images/devil.png)
- 愿意将twig带到CSS中,将其重新编译为web/css/a.css并使其指向/web/bundles/mynicebundle/images/devil.png中的图像
我已经使用以下所有可能(合理)的组合进行了测试:
- @notation,相对符号
- 用cssrewrite解析,没有它
- CSS图像背景vs直接<img>标签src =与CSS完全相同的图像
- CSS使用资产进行解析,也无需使用资产直接输出进行解析
- 所有这些都通过
Resources/public/css使用CSS和"私有"目录(asResources/assets/css)尝试"公共目录"(as )而成倍增加.
这在同一根树枝上总共给了我14种组合,这条路线是从这条路线发射出来的
- "/app_dev.php/"
- "/app.php/"
- 和"/"
因此给出了14 x 3 = 42次测试.
此外,所有这些都已在一个子目录中进行了测试,因此无法通过提供绝对URL来欺骗,因为它们根本不起作用.
测试是两个未命名的图像,然后div从'a'命名为'f',用于从公共文件夹构建的CSS,并命名为'g to'l'用于从内部路径构建的.
我观察到以下情况:
14个测试中只有3个在三个URL上得到了充分的显示.NONE来自"内部"文件夹(Resources/assets).这是获得备用CSS PUBLIC然后使用资产FROM进行构建的先决条件.
这些是结果:
使用/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>
container.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');
}
"目录"结构是:
目录
所有这一切都来了,因为我不希望个人原始文件暴露给公众,特别是如果我想玩"少"过滤器或"sass"或类似...我不希望我的"原件"发布,只有编一个.
但有好消息.如果你不想在公共目录中拥有"备用CSS"......不要安装它们--symlink,而是真正制作副本.一旦"assetic"构建了复合CSS,您就可以从文件系统中删除原始CSS,并保留图像:
编译过程
注意我是为--env=prod环境做的.
最后几点想法:
通过将图像放在Git或Mercurial中的"public"目录和"assets"目录中的"css"中,可以实现这种期望的行为.也就是说,不要让它们像目录中所示的"公共"一样,想象一下,a,b,c ......驻留在"资产"而不是"公共"中,而不是安装程序/部署者(可能是Bash脚本)在
assets:install执行之前暂时将CSS放在"public"目录中,然后assets:install,然后执行assetic:dump后自动从公共目录中删除CSSassetic:dump.这将完全解决问题中所需的行为.另一个(如果可能的话,未知)解决方案是探索"资产:安装"是否只能将"公共"作为来源,或者也可以将"资产"作为发布来源.
--symlink在开发时安装选项时,这将有所帮助.另外,如果我们要从"公共"目录编写删除脚本,那么将它们存储在单独的目录("资产")中的需要就会消失.他们可以在我们的版本控制系统中居住在"公共"内部,因为在部署到公众时将会丢弃.这也允许
--symlink使用.
但是,现在注意:现在原来不再存在(rm -Rf),只有两个解决方案,而不是三个.工作div"B"不再起作用,因为它是一个资产()调用,假设有原始资产.只有"C"(已编译的)才有效.
所以...只有一个最终获胜者:Div"C"完全允许在主题中提出的内容:要编译,尊重图像的路径,不要将原始资源暴露给公众.
获胜者是C.
- 链接到上一篇文章的图像:1)[使用/app_dev.php/](http://i.stack.imgur.com/LSp8N.jpg)启动的结果,2)使用/app.php/启动的结果[链接](http://i.stack.imgur.com/Qn6cx.jpg),3)使用/ [link](http://i.stack.imgur.com/7MsJx.jpg)启动结果,4)目录[链接](http://i.stack.imgur.com/bZ2ON.jpg),5)编译过程[链接](http://i.stack.imgur.com/O7ykm.jpg),6)谁是谁获胜者[链接](http://i.stack.imgur.com/drG0N.jpg) (3认同)
jer*_*arc 16
cssrewrite过滤器目前与@bundle表示法不兼容.所以你有两个选择:
参考在网络文件夹中的CSS文件(后:
console assets:install --symlink web)
Run Code Online (Sandbox Code Playgroud){% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}使用cssembed过滤器将图像嵌入到CSS中.
Run Code Online (Sandbox Code Playgroud){% stylesheets '@MyCompanyMyBundle/Resources/assets/css/*.css' filter="cssembed" %}
感谢@ xavi-montero,我将发布对我有用的内容.
把你的CSS放在你的软件包的Resource/public/css目录中,然后把你的图片说出来Resource/public/img.
'bundles/mybundle/css/*.css'在布局中将资产路径更改为表单.
在config.yml,添加规则css_rewrite到资产:
assetic:
filters:
cssrewrite:
apply_to: "\.css$"
现在安装资产并使用assetic进行编译:
$ rm -r app/cache/* # just in case
$ php app/console assets:install --symlink
$ php app/console assetic:dump --env=prod
这对于开发框来说已经足够了,并且--symlink非常有用,因此您无需在输入时重新安装资源(例如,添加新图像)app_dev.php.
对于生产服务器,我刚刚删除了'--symlink'选项(在我的部署脚本中),并在最后添加了这个命令:
$ rm -r web/bundles/*/css web/bundles/*/js # all this is already compiled, we don't need the originals
一切都完成了.有了这个,您可以在.css文件中使用这样的路径:../img/picture.jpeg
我有同样的问题,我只是尝试使用以下作为解决方法.到目前为止似乎工作.您甚至可以创建一个虚拟模板,其中只包含对所有这些静态资产的引用.
{% stylesheets
output='assets/fonts/glyphicons-halflings-regular.ttf'
'bundles/bootstrap/fonts/glyphicons-halflings-regular.ttf'
%}{% endstylesheets %}
请注意省略任何输出,这意味着模板上没有显示任何内容.当我运行assetic时:转储文件被复制到所需位置,css包含按预期工作.