Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Symfony2 Assetic wrong cssrewrite resources path in css/less files

The cssrewrite filter produces wrong urls after the rewrite: i have my bundle which contains one .less file located in Resources/public/less/common.less

I also have one image,located in Resources/public/images/colorfulbg.jpg

i run from the command line :

php app/console assets:install web --symlink

which produces in the web directory the correct public structure:

web
+--bundles
   +--mybundle
      +--less
      |  +--common.less
      |
      +--images
         +--colorfulbg.jpg

in my template i have the following:

{% stylesheets 'bundles/mybundle/less/*' filter='cssrewrite,less' %}
  <link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}

That folder just contains one .less file , which is simply:

@bg: #f4f4f4;
body 
{
  background-image: @bg url(../images/colorfulbg.jpg);
}

There is something wrong, since the rewrited background path is:

url(../../bundles/mybundle/images/colorfulbg.jpg);

and therefore the background is not applied

What am i doing wrong?

I am using symfony 2.3 and assetic bundle 2.3 Thank you

like image 822
Stormsson Avatar asked Oct 31 '13 23:10

Stormsson


People also ask

How does assetic work with Symfony?

In the dev environment, Assetic generates paths to CSS and JavaScript files that don't physically exist on your computer. But they render nonetheless because an internal Symfony controller opens the files and serves back the content (after running any filters).

How do I implement cache busting in Symfony?

Symfony provides various cache busting implementations via the version , version_format, and json_manifest_path configuration options. In the dev environment, Assetic generates paths to CSS and JavaScript files that don't physically exist on your computer.

Why does cssrewrite not work with this url?

This does not work, since cssrewrite produces the following code: url("../../Resources/assets/") which is obviously the wrong path.

How to use cssrewrite filter with @bundle notation?

The cssrewrite filter is not compatible with the @bundle notation for now. So you have two choices: Reference the CSS files in the web folder (after: console assets:install --symlink web)


1 Answers

I had the same problem when specifying write_to option for assetic (suppose, I wanted my styles output into web/assets/css/styles.css):

assetic:
    write_to:       '%kernel.root_dir%/../web/assets'

    assets:
        my_stylesheets:
            output: 'css/styles.css'
            inputs:
                - 'bundles/mybundle/css/styles.css'

I could not find a better solution rather then not specifying anything else than web/ folder for write_to option (or not specifying it at all). However, you can still use subfolders for every separate asset:

assetic:
    write_to:       '%kernel.root_dir%/../web'

    assets:
        my_stylesheets:
            output: 'assets/css/styles.css'
            inputs:
                - 'bundles/mybundle/css/styles.css'

P.S. In both of upper cases styles will be in web/assets/css/styles.css, but in first case csrewrite will give incorrect paths, while the second one will work fine.

like image 171
Multis Avatar answered Oct 21 '22 14:10

Multis