104

问题

我有一个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.pngNotFoundHttpException.

有没有更好的工作解决方案?

4

6 回答 6

196

我遇到了非常非常相同的问题。

简而言之:

  • 愿意在“内部”目录中拥有原始 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 并从那里使用资产构建是一个先决条件。

这些是结果:

  1. 结果使用 /app_dev.php/ 启动 结果使用 /app_dev.php/ 启动

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

  3. 结果以 / 启动 在此处输入图像描述

所以......只有 - 第二张图片 - 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环境。

最后的一些想法:

  • 可以通过将图像放在GitMercurial的“public”目录中并将“css”放在“assets”目录中来实现这种期望的行为。也就是说,与其将它们放在目录中所示的“公共”中,不如想象 a、b、c... 位于“资产”而不是“公共”中,而不是让您的安装程序/部署程序(可能是Bash脚本)在执行之前将 CSS 临时放在“公共”目录中,然后,然后,然后在assets:install执行之后自动从公共目录中删除 CSS 。这将完全实现问题中所需的行为。assets:installassetic:dumpassetic:dump

  • 另一个(如果可能的话未知)解决方案是探索“assets:install”是否只能将“public”作为来源,或者也可以将“assets”作为发布来源。在开发时使用该--symlink选项安装时会有所帮助。

  • 此外,如果我们要编写从“公共”目录中删除的脚本,那么将它们存储在单独的目录(“资产”)中的需求就消失了。它们可以存在于我们的版本控制系统中的“public”中,因为它们会在部署到公众时被丢弃。这也允许--symlink使用。

但是无论如何,现在注意:由于现在原件不再存在(rm -Rf),因此只有两个解决方案,而不是三个。工作 div "B" 不再工作,因为它是一个asset() 调用,假设有原始资产。只有“C”(编译后的)可以工作。

所以......只有一个最终的赢家:Div“C”完全允许它在主题中提出的要求:要编译,尊重图像的路径并且不要将原始来源暴露给公众。

获胜者是C

获胜者是C

于 2012-04-24T00:32:05.433 回答
17

cssrewrite 过滤器目前与@bundle 表示法不兼容。所以你有两个选择:

  • 引用 web 文件夹中的 CSS 文件(后console assets:install --symlink web:)

    {% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}
    
  • 像这样使用 cssembed 过滤器在 CSS 中嵌入图像。

    {% stylesheets '@MyCompanyMyBundle/Resources/assets/css/*.css' filter="cssembed" %}
    
于 2012-03-26T00:09:44.843 回答
9

感谢@xavi-montero,我会发布对我有用的东西。

把你的 CSS 放在你的 bundleResource/public/css目录中,把你的图片放在Resource/public/img.

'bundles/mybundle/css/*.css'在您的布局中更改表单的资产路径。

config.yml中,将规则添加css_rewrite到资产:

assetic:
    filters:
        cssrewrite:
            apply_to: "\.css$"

现在安装资产并使用资产编译:

$ 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

于 2012-08-22T05:05:15.960 回答
5

我遇到了同样的问题,我只是尝试使用以下方法作为解决方法。到目前为止似乎工作。您甚至可以创建一个仅包含对所有这些静态资产的引用的虚拟模板。

{% stylesheets
    output='assets/fonts/glyphicons-halflings-regular.ttf'
    'bundles/bootstrap/fonts/glyphicons-halflings-regular.ttf'
%}{% endstylesheets %}

注意任何输出的遗漏,这意味着模板上没有显示任何内容。当我运行 assets:dump 时,文件被复制到所需的位置,并且 css 包含预期的工作。

于 2013-10-19T22:19:17.637 回答
3

如果它可以帮助某人,我们在 Assetic 上做了很多努力,我们现在在开发模式下做以下事情:

  • 像在 dev Environmen中的 Dumping Asset Files 中一样设置config_dev.yml,我们评论说:

    #assetic:
    #    use_controller: true
    

    在 routing_dev.yml

    #_assetic:
    #    resource: .
    #    type:     assetic
    
  • 将 URL 指定为来自 Web 根目录的绝对 URL。例如,背景图像:url("/bundles/core/dynatree/skins/skin/vline.gif");注意:我们的虚拟主机 Web 根目录指向web/.

  • 没有使用 cssrewrite 过滤器

于 2012-08-22T20:18:51.017 回答
1

我用 composer 管理 css/js 插件,它安装在供应商下。我将它们符号链接到 web/bundles 目录,这让作曲家可以根据需要更新包。

例子:

1 - 符号链接一次(使用命令 fromweb/bundles/

ln -sf vendor/select2/select2/dist/ select2

2 - 在需要的地方使用资产,在树枝模板中:

{{ asset('bundles/select2/css/fileinput.css) }}

问候。

于 2016-06-19T12:42:51.980 回答