Symfony 2中CSS文件中的资产路径

时间：2012-02-29 14:06:36

标签： php css 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。

是否有更好的工作解决方案？

6 个答案:

答案 0 :(得分：193)

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

简而言之：

  • 愿意在“内部”目录中使用原始CSS（资源/资产/ css / a.css）
  • 愿意将图像放在“公共”目录中（Resources / public / images / devil.png）
  • 愿意那个twig接受CSS，重新编译成web / css / a.css并让它指向/web/bundles/mynicebundle/images/devil.png
    • 中的图像

我已经使用以下所有可能（合理）的组合进行了测试：

  • @notation，相对记谱法
  • 使用cssrewrite解析，没有它
  • CSS图片背景与直接＆lt; img＆gt; tag src =与CSS相同的图像
  • 用资产解析的CSS，也没有用资产直接输出解析
  • 所有这些都是通过CSS和“私人”目录（Resources/public/css）尝试“公共目录”（如Resources/assets/css）而成倍增加。

这在同一根树枝上总共给了我14种组合，这条路线是从

发起的
  • “/ app_dev.php /”
  • “/ app.php /”
  • 和“/”

因此给出14 x 3 = 42次测试。

此外，所有这些都已在子目录中进行了测试，因此无法通过提供绝对URL来欺骗，因为它们根本不起作用。

测试是两个未命名的图像，然后div从'a'命名为'f'，用于从公共文件夹构建的CSS，并命名为'g to'l'用于从内部路径构建的。

我观察到以下内容：

在三个网址上，14个测试中只有3个被充分展示。 NONE来自“内部”文件夹（Resources / assets）。这是获得备用CSS PUBLIC然后使用资产FROM进行构建的先决条件。

结果如下：

  1. 使用/app_dev.php/启动的结果 Result launched with /app_dev.php/

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

  3. 使用/启动的结果 enter image description here

    4. 所以......只有   - 第二张图片   - 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');
}

    “目录”结构是：

    目录 Directories

    所有这一切都来了，因为我不希望个人原始文件暴露给公众，特别是如果我想玩“少”过滤器或“sass”或类似...我不想要我的“原件“已发布，只有已编译的。

    但好消息。如果你不想在公共目录中拥有“备用CSS”......不要用--symlink安装它们，而是真正制作副本。一旦“assetic”构建了复合CSS，您就可以从文件系统中删除原始CSS，并保留图像：

    编译过程 Compilation process

    注意我是为--env=prod环境执行此操作。

    最后几点想法：

    • 通过将图像放在Git或Mercurial中的“public”目录和“assets”目录中的“css”中，可以实现此期望的行为。也就是说，不要让它们像目录中所示的“公共”一样，想象一下，a，b，c ......驻留在“资产”而不是“公共”中，而不是你的安装人员/部署者（可能是{{3在执行assets:install之前将CSS暂时放在“public”目录中，然后assets:install，然后assetic:dump，然后自动从公共目录中删除CSS assetic:dump已被执行。这将完全解决问题中所需的行为。

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

    • 此外，如果我们要从“公共”目录编写删除脚本，则需要将它们存储在单独的目录（“资产”）中消失。他们可以在我们的版本控制系统中居住在“公共”内部，因为在部署到公众时会被丢弃。这也适用于--symlink用法。

    但是，现在注意：由于现在原件不再存在（rm -Rf），因此只有两种解决方案，而不是三种解决方案。工作div“B”不再起作用，因为它是一个资产（）调用，假设有原始资产。只有“C”（已编译的）才有效。

    所以...只有一个最终获胜者：Div“C”完全允许在主题中提出的内容：要编译，请尊重图像的路径，不要将原始资源暴露给公众。 / p>

    获胜者是C

    The winner is C

答案 1 :(得分：16)

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

  • 引用网络文件夹中的CSS文件（在console assets:install --symlink web之后）

    {% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}

  • 使用cssembed过滤器将图像嵌入CSS中。

    {% stylesheets '@MyCompanyMyBundle/Resources/assets/css/*.css' filter="cssembed" %}

答案 2 :(得分：8)

感谢@ 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

答案 3 :(得分：5)

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

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

请注意省略任何输出，这意味着模板上没有显示任何内容。当我运行assetic时：转储文件被复制到所需位置，css包含按预期工作。

答案 4 :(得分：2)

如果它可以帮助某人，我们在Assetic方面遇到了很多困难，我们现在正在开发模式中进行以下操作：

  • 在 Dumping Asset Files in the dev Environmen 中进行设置，因此在config_dev.yml中，我们发表了评论：

    #assetic:
#    use_controller: true

    在routing_dev.yml

    中 
    #_assetic:
#    resource: .
#    type:     assetic

  • 从Web根目录指定URL为绝对值。例如，background-image：url("/bundles/core/dynatree/skins/skin/vline.gif");注意：我们的vhost Web根目标指向web/。

  • 不使用cssrewrite过滤器

答案 5 :(得分：1)

我使用composer管理css / js插件，并在供应商下安装它。 我将这些符号链接到web / bundles目录，让编辑器根据需要更新包。

例如：

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

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

2 - 在树枝模板中使用需要的资产：

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

问候。

相关问题
最新问题