How to use lesscss without NodeJs in Symfony2 with Assetic?

24 April 2013

Today, we will talk about a little trick: How to use Less when node.js is not available on your server?

We will use the latest version of lessphp available at the time of writing this article. You can find the full list of tags on github : https://github.com/leafo/lessphp/tags.

Assuming Composer is already installed, run the following command from your console to complete the installation:

php composer.phar require leafo/lessphp:0.3.9

The composer require command adds lessphp package to the composer.json file from the current directory and executes a composer update command.

Then, we need to update our config file:

# app/config/config.yml
# Assetic Configuration
assetic:
    filters:
        cssrewrite: ~
        lessphp:
            apply_to: "\.less$"
            #file:   %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php

Assetic will change the paths to our assets and breaks all links that use relative paths.
In order to prevent this, we use cssrewrite filter that parses CSS files and rewrites paths to reflect the new location.

We use the ‘apply_to’ option so we don’t need to specify the lessphp filter on the twig template.

‘file’ parameter is useless since this commit if we use Composer autoloading. (Thanks @stof)

Finally, you can include your less files in the template like this:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>My WebSite</title>
        {% stylesheets
            'bundles/acme/less/example.less'
        %}
            <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
        {% endstylesheets %}
    </head>
    <body>
        {% block body%}{% endblock %}
    </body>
</html>

Because of the latency between the new lesscss feature and his implementation in php, lessphp is not as good as the latter but it is possible to use it in most situations.

You can find more information on the lessphp website: http://leafo.net/lessphp/

Filed under : Programming — by @ 13 h 20 min

7 Comment »

  1. Stof say :
    24 April 2013

    you don’t need the “file” key as lessphp provides the autoloading config in its composer package definition

    13 h 36 min

  2. Jcrombez say :
    24 April 2013

    I don’t know if it’s still the case, but the last time i used LessPHP, it wasn’t compatible with pure Less and was using an alternative syntax of it. So it wasn’t possible to compile Twitter Bootstrap for instance.

    21 h 58 min

  3. nverhaegen say :
    29 April 2013

    I can confirm that when I tried it (about 5 weeks ago), twitter bootstrap compiled just fine with LessPHP

    12 h 24 min

  4. Jonathan Beurel say :
    1 May 2013

    @Stof: Indeed, I modified the post. Thx

    @Jcrombez: I also encountered problems to compile Twitter Bootstrap but it’s fixed now (https://github.com/leafo/lessphp/issues/382)

    14 h 11 min

  5. Julien ITARD say :
    1 May 2013

    What’s about less.js ?

    20 h 58 min

  6. Colin Burton say :
    10 August 2013

    Does this compile the stylestyles throught he less filter every time the page loads? Or does this create a cached version in some way that I’m missing?

    3 h 17 min

  7. Jonathan Beurel say :
    12 August 2013

    @Colin: LESS files are compiled to CSS file when you dump your assets with “app/console assetic:dump” command. When you refresh your page, only the CSS files are used.

    @Julien: I never used less.js but at first sight, the less file is compiled by the JS script each time you load your page so I think it’s less efficient than lessphp.

    18 h 13 min


Leave an answer