How to compile .less styles into .css (on any OS)

How to compile .less styles into .css (on any OS)

From dextervip

Hi, Less language have been growing up a lot but How can I configure assetic manager to compile less css and rewrite it properly in windows environment?

Answer

Note

Special thanks to our very-own Roman on this 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.

Note

While lessphp is very good, nothing is as good as the real thing and it’s possible that you’ll write valid less code that doesn’t compile correctly. However, these seem to be edge-cases, so worry about that when it happens.

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

"leafo/lessphp": "~0.3"

Tip

Curious about the ~0.3 version? It’s roughly equivalent to >=0.3,<1.0 and is awesome. See Package Versions for more details.

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$"

Tip

Unlike most libraries we bring in via Composer, this one does not follow the PSR-0 standard, and actually just contains a single (useful) file. The file key under assetic filters is built to handle this: the file is required before the filter is used.

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 %}

Tip

You only need either the apply_to in config.yml or the filter='lessphp' in your template, but not both! With the apply_to option, the filter is automatically applied to all *.less files.

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.

Tip

If your CSS files begin to load slowly in the dev environment, you may consider turning the use_controller setting to false and dumping your assets manually with the --watch flag. See Starting in Symfony2 Episode 4

Leave a comment!