Symfony2 - Assetic - 在CSS中加载图像

Question

我有一个包含主要css文件和图像的CoreBundle.现在我从css加载图像时出现问题; 图像未显示.

 background-image:url(../images/file.png)

(它有一个完整的路径)

我使用命令安装了资产:assets:install web我可以在下面看到图像和css文件web/bundles/cmtcore/(css|images).

这是核心包内的文件结构:

/CoreBundle
    /Resources
        /public
            /css
                /main.css
            /images
                /file.png

以下是我将css文件加载到模板中的方法:

 {% stylesheets '@CmtCoreBundle/Resources/public/css/*' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

提前谢谢你的帮助.

Answer 1

使用cssrewriteAssetic包中的过滤器

在config.yml中:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

然后像这样调用样式表:

 {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

哦,别忘了使用 php app/console assetic:dump

Answer 2

ccsrewrite几乎没有问题:

使用AsseticBundle中的@MyBundle语法引用资产时,CssRewrite过滤器不起作用.这是一个已知的限制.

这是cssrewrite的php版本:

<?php 
    foreach ($view['assetic']->stylesheets(array(
        'bundles/test/css/foundation/foundation.css',
        'bundles/test/css/foundation/app.css',
        'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url):
?>
    <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach; ?>

Answer 3

我按照本网站上的说明解决了这个问题:http: //www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

实际问题是您引用了bundle资源的绝对值,但必须相对引用它们.

{% stylesheets filter='cssrewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

清除缓存并再次安装资产

Answer 4

关于Yann的答案,如果您使用该--symlink选项,实际上您不必在每次更改后重新安装资产.

但请注意,运行供应商安装脚本将覆盖符号链接,因此在运行供应商脚本后,您需要删除bundles/*文件夹并--symlink再次使用该选项安装资产.

Answer 5

我开发了一个带有额外过滤器的小捆绑来解决这个问题.你可以在github上找到它:https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

如果您的css文件中有相对路径,那么使用此捆绑包可以使用@Notation for assetic.