User login
Stay in touch
-
-
Subscribe!
Sign Up! Never miss an article again -
See my resume
I'm sure I can help you -
Follow-me
See what's in my mind
Less on Symfony2 with Assetic + NodeJS + NPM + Less.js
Less on Symfony2 with Assetic + NodeJS + NPM + Less.js
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.
#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...