magento2 如何调试LESS？

最新推荐文章于 2021-09-22 11:31:08 发布

weixin_34296641

最新推荐文章于 2021-09-22 11:31:08 发布

阅读量343

点赞数

文章标签：前端 ViewUI

原文链接：https://segmentfault.com/a/1190000005367341

版权

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...