I was having trouble getting LESS CSS (website here) configured properly in a project using Symfony2. Who better to ask for help than the man who wrote Assetic? So, i pinged Kris Wallsmith on IRC. He helped me out and asked me if I would write up a little post about how to correctly configure and use LESS within a Symfony 2 project and a Twig template.
In order for the LessFilter to work you must have Node.js installed. So head over here and install it if you have not already done so. You also have to install the LESS Node.js package. Read about that here under the “Server-side usage” heading.
Now that we have Node.js installed we can configure Assetic, so open up your config.yml and lets get to work. Here is my working configuration for LESS.
# app/config/config.yml
assetic:
debug: %kernel.debug%
use_controller: false
filters:
cssrewrite: ~
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node]
yui_css:
jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
yui_js:
jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar |
Your Node.js binary file may reside at a different path as well as the LESS Node.js extension. So, just be aware that those two parameters may be different on your machine. I am also compressing my output using the YUI Compressor.
Next, open up your base.html.twig file. Copy the following code into the head section:
{% stylesheets filter='less,?yui_css' '@MyBundle/Resources/less/site.less' %}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %} |
Here we have specified that we want to output stylesheets using the LESS filter and then compressing it with the YUI CSS compressor. Next we point it to the location of our LESS file.
Thats it. Enjoy.
Is there a compelling reason to use node rather than lessphp?
thanks, filled in some blanks and reinforced what we already know, thanks, make sure you explain more things about Less, for instance this is not for javascript, only for css, and also on debug mode the compilation is done on the fly, also about node.js which I know nowthing about. Make sure you notice that people should have node.js more importantly deployed on their server and not on the local server. There is a param you should try output=’/pathtofilecompressed’, did I say the question mark is for compression debug or sorts of? It would be great if you show some less code also, and how it was compressed to css. Thanks!
nevermind I just solved it, and also in addition i installed less, nodejs and python on my sharedhosting, finally able to deploy and do all things on server side
thanks man
@Jason Waters
I believe node-less supports media queries, while lessphp does not.
Thanks for this post, I got a question what if you have multiple css, less, or sass files how do you add them ?
just add them right below
no comas
I am trying to get the same running perhaps it is broken today
You have any idea why I would receive this error during the processing of each less file.
[exception] 500 | Internal Server Error | RuntimeException
[message] The process stopped because of a "0" signal.
[1] RuntimeException: The process stopped because of a "0" signal.
Each css file returns a 500 error with this error.
Pingback: ServerGrove Blog » Blog Archive » Error “Cannot find module ‘less’” with Symfony2, Assetic and Twitter Bootstrap
Thanks for posting this. Was a big help. For OS X users, config might look something like this:
filters:
cssrewrite: ~
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node_modules/npm/node_modules]
closure:
jar: %kernel.root_dir%/java/closure-compiler.jar
yui_css:
jar: %kernel.root_dir%/java/yuicompressor-2.4.7.jar