Answer¶

We use less in our projects and love it. However, we do have a mixture of operating systems and also had our own issues getting less to compile properly.

Less is typically compiled by lessc, which is installed from npm (Node Package Manager), which is a part of Node.js. Phew! Now, none of this is necessarily complicated, but if you’re not familiar with node and node modules, then it can be a blocker. As the question suggested, this is sometimes even harder on Windows. In fact, Rafael - who asked this question - has his own problems with exactly this.

So what’s the solution? Our advice: avoid the problem.

What we mean is to avoid the true less and instead use lessphp - a pure PHP implementation of the less compiler. Normally, I’m a proponent of letting other languages do things they’re good at, but if you’re having issues with normal less, take advantage of this tool. As an added bonus, lessphp has a built-in filter in Assetic, so using it is simple.

To install lessphp, just add it to your composer.json file under the require key:

"leafo/lessphp": "~0.3"

Next, configure the assetic key on config.yml to activate the filter:

# app/config/config.yml
# ...

assetic:
    filters:
        lessphp:
            file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
            apply_to: "\.less$"

Finally, setup the stylesheets in your base layout (or wherever):

{# app/Resources/view/base.html.twig #}
{# ... #}

{% stylesheets filter='lessphp' output='css/main.css'
    'bundles/qaday/less/main.less'
%}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}

Woh! That’s it! Assuming you have the use_controller setting on in config_dev.yml, you can just access your page to see it working. In the background, the main.less file is being processed and the end-CSS is being returned.

You can also dump your assets and see a shiny-new main.css file come out:

php app/console assetic:dump --env=prod

If you ever have any weird issues - especially when playing with your assetic configuration in config.yml, try clearing your Symfony and browser cache. You don’t normally need to do this, but there are some edge cases in this area where you might need to.