Yii2 Asset Convertor

Question

I'm trying to use Less with my Yii2 application. I use the advanced application and would like to convert my .less files in the frontend/web/css using the asset convertor build in with yii2.

'assetManager' => [
      'bundles' => [
            'yii\bootstrap\BootstrapAsset' => [                     
                 'css' => []
            ],

        ],
     'converter' => [
         'class' => 'yii\web\AssetConverter',
         'commands' => [
            'less' => ['css', 'lessc {from} {to} --no-color'],

         ],
        ],
    ],

The above is in my main.php config file.

    class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.less',
       'css/superhero.less',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

The above is the appAsset file.

but how can I install the less tool in my yii2 installation? I put less-1.7.5.js in the root folder where my yii console bootstrap file is but where do I have to adjust the configuration to convert the less files?

Thx in advance!

Answer 1

What I've just did in my project:

main.php config file:

    'assetManager' => [
        'converter' => [
            'class' => 'yii\web\AssetConverter',
            'commands' => [
                'less' => ['css', 'nodejs "' . PROTECTED_BASE_PATH . 
                    '/node_modules/less/bin/lessc" {from} {to} --no-color'],
            ],
        ],
    ],

Command line (in the subdirectory, represented by PROTECTED_BASE_PATH above):

$ npm install less

That's all. It works fine after git pull on another machine.

Of course, nodejs itself must be installed globally.

Important note. This is unusual way to keep the nodejs packges in VCS (though I have a reason to do so). Consider use of package.json instead.

Answer 2

To install less compiler (lessc) to your project use composer command:

composer require bower-asset/less

Then add to config:

'assetManager' => [
    'converter' => [
        'class' => 'yii\web\AssetConverter',
        'commands' => [
            'less' => ['css', '@bower/less/packages/less/bin/lessc {from} {to} --no-color'],
        ],
    ],
],

This config is helpful for shared hosting, when you have no root privileges and can't install lessc globally.

Answer 3

install less converter: Server-Side and Command Line Usage http://lesscss.org/usage/

and make sure command available as lessc from anywhere ie added to PATH