首页 ❯

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

php css symfony assetic
2022-08-30 07:34:50

问题

我有一个CSS文件，其中包含一些路径（用于图像，字体等）。url(..)

我的路径结构是这样的：

...
+-src/
| +-MyCompany/
|   +-MyBundle/
|     +-Resources/
|       +-assets/
|         +-css/
|           +-stylesheets...
+-web/
| +-images/
|   +-images...
...

我想在样式表中引用我的图像。

第一个解决方案

我将CSS文件中的所有路径都更改为绝对路径。这不是解决方案，因为应用程序也应该（并且必须！）在子目录中工作。

第二种解决方案

将 Assetic 与 结合使用。filter="cssrewrite"

所以我将CSS文件中的所有路径都更改为

url("../../../../../../web/images/myimage.png")

以表示从我的资源目录到该目录的实际路径。这不起作用，因为 cssrewrite 会生成以下代码：/web/images

url("../../Resources/assets/")

这显然是错误的道路。

创建此路径后，这仍然是错误的：assetic:dump

url("../../../web/images/myimage.png")

资产的树枝代码：

{% stylesheets
    '@MyCompanyMyBundle/Resources/assets/css/*.css'
    filter="cssrewrite"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

当前（第三个）解决方案

由于所有 CSS 文件都以 中结束，我将 CSS 文件中的所有路径都更改为相对路径：/web/css/stylexyz.css

url("../images/myimage.png")

这个（坏的）解决方案有效，除了在环境中：CSS路径是，因此由此产生的图像路径是，这导致.dev/app_dev.php/css/stylexyz.css/app_dev.php/images/myimage.pngNotFoundHttpException

有没有更好和有效的解决方案？


答案 1

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

总之：

  • 愿意在“内部”目录中拥有原始CSS（资源/资产/css/a.css）
  • 愿意将图像放在“公共”目录（资源/公共/图像/魔鬼.png）
  • 愿意让树枝拿走那个CSS，把它重新编译成web/css/a.css，让它指向/web/bundles/mynicebundle/images/devil中的图像.png

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

  • @notation，相对表示法
  • 使用 cssrewrite 进行解析，无需它
  • CSS 图像背景与直接<img> 标记 src= 到与 CSS 完全相同的图像
  • CSS使用资产进行解析，并且不使用资产直接输出进行解析
  • 所有这一切都通过尝试使用CSS的“公共目录”（as）和“私有”目录（as）来乘以。Resources/public/cssResources/assets/css

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

  • “/app_dev.php/”
  • “/应用.php/”
  • 和“/”

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

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

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

我观察到以下情况：

14 个测试中只有 3 个在三个 URL 上充分显示。没有来自“内部”文件夹（资源/资产）。拥有备用的CSS PUBLIC，然后从那里使用assetaric构建是先决条件。

以下是结果：

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

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

  3. 结果启动方式 /enter image description here

所以。。。仅 - 第二个图像 - 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');
}

“目录”结构是：

目录 Directories

所有这一切都来了，因为我不希望将单个原始文件暴露给公众，特别是如果我想玩“更少”过滤器或“sass”或类似的东西......我不想让我的“原件”出版，只想出版编译的。

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

编译过程 Compilation process

注意：我这样做是为了环境。--env=prod

最后几个想法：

  • 这种期望的行为可以通过在Git或Mercurial的“公共”目录中的图像和“资产”目录中的“css”来实现。也就是说，不要像目录中显示的那样将它们放在“公共”中，而是想象a，b，c...驻留在“资产”而不是“公共”中，而不是让你的安装程序/部署器（可能是Bash脚本）在执行之前将CSS暂时放在“公共”目录内，然后，然后，然后在执行后自动从公共目录中删除CSS。这将完全达到问题中所需的行为。assets:installassets:installassetic:dumpassetic:dump

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

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

但无论如何，现在要小心：由于现在原始版本不再存在（），因此只有两种解决方案，而不是三种。工作 div “B” 不再工作，因为它是一个资产（） 调用，假设存在原始资产。只有“C”（编译的那个）才能工作。rm -Rf

所以。。。只有最终的赢家：Div“C”允许完全符合主题中的要求：要进行编译，请尊重图像的路径，并且不要向公众公开原始来源。

获胜者是C

The winner is C


答案 2

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" %}

推荐
更多 »
标签
更多 »
php pass-by-reference optional-parameters default-value javascript arrays dom function string object serialization tostring visibility syntax jslint use-strict operators equality equality-operator identity-operator datetime timestamp date-arithmetic redirect angularjs loops foreach iteration scope variables
推荐
更多 »