magento2 如何调试LESS？

magento2内置lessphp，在developer模式下会自动编译LESS。然而并无用，若是less写错了会致使lessphp编译失败，并且不会提示你已经失败，你只会看到乱成一团的页面。另外lessphp并不会加source map定位信息，在页面上看到的CSS没法追踪对应的LESS代码，对于前端来讲，不能定位就至关于没法工做。那就只有使用grunt来编译less，若是已经安装了nodejs，使用如下代码部署grunt

npm install -g grunt-cli
npm install

若是你使用本身的主题，你还须要在grunt的配置文件里追加less的配置

// dev/tools/grunt/configs/themes.js
mytheme: {
    area: 'frontend',
    name: '<Vendor>/<Theme>',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
}

而后使用如下代码可进行less编译

grunt clean:var
grunt deploy
grunt exec:mytheme
grunt less:mytheme

完成以上过程，能够在浏览器的调试器里看到LESS的定位。deploy时间至关漫长，幸亏之后每次修改less只须要执行一次grunt less:mytheme，就能够看到修改效果。

如下是有less定位的效果

指令解释

grunt clean:var // 删除var/下的缓存文件
grunt deploy // 把app下的JS, LESS源代码经过转换与继承策略迁移到pub之下，让浏览器能够访问
grunt exec:mytheme // pub下的LESS, JS资源软连接到app里的源代码，使直接修改源代码能够立刻生效
grunt less:mytheme // pub下全部less编译为css

参考：http://devdocs.magento.com/gu...