Symfony 2中CSS文件的资源path

问题

我有一个CSS文件，其中有一些path（图像，字体等.. url(..) ）。

我的path结构是这样的： 

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

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

第一个scheme

我将CSS文件中的所有path改为绝对path。 这不是解决scheme，因为应用程序应该（也必须）在一个子目录中工作。

第二个scheme

在filter="cssrewrite"使用Assetic。

所以我改变了我的CSS文件中的所有path 

 url("../../../../../../webhttp://img.dovov.commyimage.png")

来表示从我的资源目录到/web/images目录的实际path。 这不起作用，因为cssrewrite产生以下代码： 

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

这显然是错误的道路。

assetic:dump这个path创build后，这仍然是错误的： 

 url("../../../webhttp://img.dovov.commyimage.png")

Assetic的嫩枝代码： 

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

当前（第三个）解决scheme

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

 url("..http://img.dovov.commyimage.png")

这个（坏的）解决scheme的工作原理除了在dev环境中：CSSpath是/app_dev.php/css/stylexyz.css ，因此得到的图像path是/app_dev.phphttp://img.dovov.commyimage.png ，一个NotFoundHttpException 。

有没有更好的工作解决scheme？

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

简而言之：

  • 愿意将原始CSS放在“内部”目录（Resources / assets / css / a.css）
  • 愿意在“公共”目录中的图像（Resources / public / images / devil.png）
  • 愿意那个小枝拿这个CSS，重新编译成web / css / a.css，并把它指向/web/bundles/mynicebundlehttp://img.dovov.comdevil.png

我已经做了所有可能的（理智的）以下组合的testing：

  • @notation，相关符号
  • 用cssrewriteparsing，没有它
  • CSS图像背景vs直接<img>标签src =与CSS相同的图像
  • 用资产parsingCSS，也不用资产直接输出parsing
  • 所有这一切都通过尝试一个“公共目录”（像Resources/public/css ）与CSS和一个“私人”目录（如Resources/assets/css ）来实现。

这给了我一共14个组合在同一根小树枝上，而这条路线是从那里开始的

  • “/app_dev.php/”
  • “/app.php/”
  • 和“/”

从而给出14×3 = 42个testing。

此外，所有这些都在一个子目录中进行过testing，因此绝对URL无法被愚弄，因为它们根本无法工作。

testing是两个未命名的图像，然后从公共文件夹构build的CSS命名为“a”到“f”，并从内部path构build的命名为“g”到“l”。

我观察到以下情况：

在这三个url中，14个testing中只有3个显示正确。 NONE来自“内部”文件夹（资源/资产）。 拥有备用的CSS PUBLIC，然后使用资产从那里构build是一个先决条件。

这是结果：

  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/commondirtyhttp://img.dovov.comdevil.png"> <img alt="Devil" src="{{ asset('bundles/commondirtyhttp://img.dovov.comdevil.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等：所有相同的，只是改变颜色和CSSselect器。 

 .a { background: red url('..http://img.dovov.comdevil.png'); }

“目录”结构是：

目录 目录

所有这一切都来了，因为我不希望个人的原始文件暴露给公众，特别是如果我想玩“less”filter或“sass”或类似…我不希望我的“原件”公布，只有编一个。

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

编译过程 编译过程

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

只是几个最后的想法：

  • Git或Mercurial中的“公共”目录中的图像以及“assets”目录中的“css”可以实现此期望的行为。 也就是说，不要像在目录中显示的那样在“公共”中设置它们，而应该设想，位于“assets”而不是“public”的a，b，c比拥有安装程序/部署程序（可能是Bash脚本）在执行assets:install之前暂时将CSS暂时放在“public”目录中，然后assets:install ，然后是assetic:dump ，然后在assetic:dump执行后自动从公共目录删除CSS。 这将完全达到问题中所需的行为。

  • 另一个（如果可能，未知数）解决scheme将是探索“资产：安装”只能采取“公开”作为来源，或者也可以把“资产”作为发布来源。 这将有助于在开发时使用--symlink选项进行安装。

  • 另外，如果我们要将脚本从“公共”目录中删除，那么需要将它们存储在一个单独的目录（“资产”）中消失。 他们可以在我们的版本控制系统里面“公开”地居住，因为这些系统会在公众面前丢弃。 这也允许使用--symlink 。

但是，现在请注意：现在原来不存在了（ rm -Rf ），只有两个解决scheme，而不是三个。 工作“乙”不再工作，因为它是一个资产（）电话假设有原始资产。 只有“C”（编译的）才能工作。

所以……只有一个最后的胜利者：Div“C”完全允许在主题中被问到：要被编译，要尊重图像的path，而不要把原始的源头公诸于众。

获胜者是C.

获胜者是C.

现在，cssrewritefilter不兼容@bundle符号。 所以你有两个select：

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

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

  • 使用cssembedfilter像这样在CSS中embedded图像。 

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

我会发布什么对我有用，感谢@ xavi-montero。

把你的CSS放在你的bundle的Resource/public/css目录下，并把你的图片放在Resource/public/img 。

将布局中的资产path更改为'bundles/mybundle/css/*.css' ”forms。

在config.yml ，将规则css_rewrite添加到asset： 

 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文件中使用这样的path： ../img/picture.jpeg

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

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

注意任何输出的省略，这意味着在模板上什么都不显示。 当我运行资产：转储文件被复制到所需的位置和CSS包括工作按预期。

如果能够帮到别人，我们已经和Assetic一起挣扎了很多，现在我们在开发模式下做了以下工作：

  • 像在开发环境中的转储资产文件一样，在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"); 注意：我们的虚拟主机web根目录在web/ 。

  • 没有使用cssrewritefilter

我取消了与供应商安装它的composer phppipe理css / js插件。 我将这些符号链接到web / bundles目录，这样就可以让composer根据需要更新包。

为例：

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

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

2 – 在需要的地方，在树枝模板中使用资产： 

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

问候。

Interesting Posts

资产：转储和资产之间的区别：安装

如何制作iOS资产套件？

在Unity中使用资源文件夹

资产txt文件的Androidpath

如何获取Android Pathstring到资产文件夹上的文件？

Rails 3.1和jquery-ui资产

Symfony2 – CSS中的资产负载图像

如何将文件从'资产'文件夹复制到SD卡？

从资产目录播放audio文件

“rake assets：precompile”给出了punc错误