Symfony2 & Less into CSS on Ubuntu

Recently I’ve ran my first project on PHP Symfony2. My aim is to create a simple product page and my first task was to add stylesheets. As I used to use Twitter Bootstrap in my previous WordPress projects I decided to use Less – one of the two CSS preprocessors supported by them. What I needed to use Less in my Symfony project was:

Instead of sudo apt-get install node use:

# get the latest version from At the time of this writing, it was 0.10.26
curl -o ~/node.tar.gz
tar -zxvf node.tar.gz
cd node-v0.10.26
./configure && make && sudo make install

to get the latest version of Node.js

  • npm – sudo apt-get install npm
  • Less – sudo npm install –global less

After all that installations I had to modify Assetic configuration in app/config/config.yml as follows:

       bundles:        [  ] //type your bundle name, eg. AcmeDemoBandle
              cssrewrite: ~
                  node: /usr/local/bin/node
                  node_paths: [/usr/local/lib/node_modules]
                  apply_to: "\.less$"

The apply_to parameter isn’t essential, but it does mean that you don’t need to apply the filter manually, it’ll automatically apply it to any files ending in .less.

Than I added in my template file (I’m using Twig) in head section:

{% block stylesheets %}
{% stylesheets
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}
{% endblock %}

* at the end of Less file path means that all the Less files that are under this directory will be combined into a one CSS „compiled-main.css”. You can control the name of the compiled file by adding output parameter.

Than I created .less file under VendorName/NameOfBundle/Resources/public/less/ directory adding to it some style for tests.

At the end I run compilation command in terminal:

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

I didn’t have to do that, because in development environment all changes in less file are compiled for every request. However this helped me find some answers why my configuration doesn’t work.



1 komentarz do wpisu “Symfony2 & Less into CSS on Ubuntu”

Dodaj komentarz