×

Stay in touch

×

Less on Symfony2 with Assetic + NodeJS + NPM + Less.js

Less on Symfony2 with Assetic + NodeJS + NPM + Less.js

  • Dec 03, 2011

Lost 2 hours configuring Less in my Symfony2 project, with the Assetic core bundle, which use NodeJS and the Less.js interpreter behind the ground (not so fan of the lessphp implementation, but it is another way to reach the goal...).

Here is my working config.

Install Ubuntu Nodejs Package

#if not allready installed
#sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

The node exe is in /usr/bin, so it's in your path

All files are in /usr/local/lib/node and /usr/local/lib/node_modules, specially the npm package installer in /usr/local/lib/node_modules/npm.

So, you should be able to install the less.js module :

npm install less 

But, if like me you built node from source, and break something in your config, there is a great installer:

cd /opt
curl http://npmjs.org/install.sh > intall-npm.sh
#read it, nice shell code...
nano install-npm.sh
chmod +x install-npm.sh
./install-npm.sh

The npm doc is well written, have a look to the readme.

Now, you might try to install less.js

Files are in /root/.npm/less and /root/node_modules

Don't care about launching node as root, it's smart and run as nobody, so no problem with Webmin, Suexec and PHP

If everything is ok for you, great! If not, good luck...

Next, in app/config.yml

 
assetic:
debug: %kernel.debug%
use_controller: false
filters:
cssrewrite: ~
less:
node: /usr/bin/nodejs
node_paths: [/usr/local/lib/node:/usr/local/lib/node_modules:/root/node_modules]

app/Resources/views/base.html.twig :

 ...
{% stylesheets filter='less' '@YourBundleNameBundle/Resources/public/css/less/main.css.less' %}
{% endstylesheets %}
...

And finally, in src/YourBundleNameBundle/Resources/public/css/less/main.css.less :

@family: "verdana";
@color: red;
body {
@mycolor: red;
font-family: @family;
color: @color;
border-bottom: 1px solid @color;
}

Here is a great how-to use Assetic with Symfony, and the config tutorial that drive me.

Clear the cache, launch your page, you should see something red...

If not, open firebug, click on the less css file, PHP errors are insides. Good luck...