05.12.11 - LESS CSS with Assetic and Symfony 2
0 comments
Add a LESS filter for your CSS files with Assetic and Symfony 2
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
For the LESS Assetic filter we need to have installed first node.js, the npm package manager and the LESS library.
Install the LESS library:
Where "USER" is our user.
That will combine all the LESS files that where under the "less" directory of your Bundle into a one CSS "compiled-main.css".
On development environment all the files will be generated for every request. For production environment you have to generate them manually:
You can use this filter with other powerful filters like theYUI compressor filter for Assetic.
For the LESS Assetic filter we need to have installed first node.js, the npm package manager and the LESS library.
Installing LESS, node.js and npm for Ubuntu
Under Ubuntu you can install all of those in an easy way through the terminal:sudo apt-get install nodejs-dev nodejs npm
npm install less
Configuring the LESS filter in Assetic
In Ubuntu the LESS library may be installed into a hidden directory called ".node_libraries" under your home. If not you have to know where is it before Assetic integration. To configure Assetic for the less filter, open the "app/config/config.yml" and add the next lines:assetic:
filters:
less:
node: /usr/bin/node
node_paths: [/home/USER/.node_libraries]
filters:
less:
node: /usr/bin/node
node_paths: [/home/USER/.node_libraries]
Usage
To use it, add the following lines to the main base layout file:{% stylesheets filter='less' output='css/compiled-main.css'
'@MyBundle/Resources/public/less/*'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}
'@MyBundle/Resources/public/less/*'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}
On development environment all the files will be generated for every request. For production environment you have to generate them manually:
php app/console assetic:dump --env=dev --no-debug
Comments
There are no comments jet. Be the first to comment!