Symfony2 Assetic wrong cssrewrite resources path in css/less files

Question

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

Fuge

i don't think i understand what do you mean... – Fuge

What happens if you simply use background-image: @bg url(images/colorfulbg.jpg);? – Poncho

the url is rewritten from: url(../../bundles/timerbase/images/colorfulbg.jpg); to url(../../bundles/timerbase/less/images/colorfulbg.jpg); i would expect something like (../images/colorfulbg.jpg) – Fuge

Well, that's that then. ;-) Personally I had my share with SASS on assetic and the conclusion was that you just don't want to do that. Hope you have more luck! – Poncho

so, what is the solution? – Gearbox

i frankly have no idea. i started using gulp & node assets composition – Fuge

Answer 1

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.

Relativize

Answer 2

Your using the wrong type of definitions to your assets in your template, see the following ( note the @ prefix ). Also in your css you have to go relatively down from your Bundle/Resources/public/less folder. So it's not /bundles/ or ../bundles but most likely ../images/.

    {% stylesheets filter='less,cssembed,?yui_css' output='css/final.css'
        '@AcmeDemoBundle/Resources/public/beautifulslider.css'
        '@AcmeDemoBundle/Resources/public/less/site.less'
    %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
    {% endstylesheets %}

Update1

Given the above, one of my projects is in the same kind of setup, it's just still on 2.2 but i don't think that would matter, I just gave it a try removing these lines from my .less

    & > a {
    background:transparent url('../images/btn-big-gray.png') repeat-x;
    }

Images gone after

    xxx michael [master] $ app/console assetic:dump --env=dev

I restore the line and after kicking assetic again they're back... I think the dis recommendation doesn't count for the fact LESS is involved?

Hernadez

nope ... the cookbook itself suggests not to doing so, because of cssrewrite : symfony.com/doc/current/cookbook/assetic/… btw the problem is that the url INSIDE the css/less file is incorrect. the css/less file is correctly included – Fuge

Answer 3

This is a common problem, I suggest you to not use cssrewrite filter and use urls with / at the beginning

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

Of course this approach has a drawback that website must be installed in a root directory for domain but to be honest I haven't seen Symfony project installed in sub directory.

Univalence

even after removing cssrewrite and using the url as you suggested it doesnt'work :/ i think app_dev.php gets in the way ... – Fuge

@Fuge do your OS support symlinks? Windows doesn't. try again to php app/console assets:install web --symlink then navigate to web directory and check if path is correct – Greyson

Yes it does,i'm on osx. the paths seems all correct, i confirm that the structure i posted in the first post has been checked – Fuge