在 Yii 2 中使用 LESS

安装

需要安装 lessc 编译工具，在项目根目录执行 npm install less

安装成功后，打开 config/web.php 添加资源自动编译命令

$config = [
	...
	'components' => [
		'assetManager' => [
			'converter' => [
				'class' => \yii\web\AssetConverter::class,
                'commands' => [
                    'less' => ['css', '@app/node_modules/.bin/lessc {from} {to} --no-color']
                ]
			]
		]
	]
    ...
];

测试

新建文件 web/css/app.less，并将其加入到 AppAsset 中

// assets/AppAsset.php
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'css/app.less'
    ];
    ...

使用 LESS 来编写 CSS 只是为了开发的便利，实际上浏览器并不认识 less 代码，浏览器引入的是已经编译后的 CSS 文件而非原来的 LESS 文件。