CODEWITHSUNDEEP
phplessyii2
Tijs Proost
Tijs Proost

Reputation: 37

Yii2 Asset Convertor

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!

Upvotes: 3

Views: 4857

Answers (3)

Anton Rybalko
Anton Rybalko

Reputation: 1314

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.

Upvotes: 1

Pavel Koryagin
Pavel Koryagin

Reputation: 1481

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.

Upvotes: 1

Degger
Degger

Reputation: 4313

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

and make sure command available as lessc from anywhere i.e. added to PATH

Upvotes: 0

Related Questions