Symfony2 & Less into CSS on Ubuntu

przez

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 nodejs.org. At the time of this writing, it was 0.10.26
curl -o ~/node.tar.gz http://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gz
cd
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:

assetic:
       bundles:        [  ] //type your bundle name, eg. AcmeDemoBandle
       filters:
              cssrewrite: ~
              less:
                  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
'VendorName/NameOfBundle/Resources/public/less/*'
%}
<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.

References:

 

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

Skomentuj Greg Anuluj pisanie odpowiedzi