服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > magento教程 >

magento2如何调试LESS?

时间:2017-01-02 14:14来源:未知 作者:最模板 点击:
magento2内置lessphp,在developer模式下会自动编译LESS。然而并没有用,如果less写错了会导致lessphp编译失败,而且不会提示你已经失败,你只会看到乱成一团的页面。另外lessphp并不会加so

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定位的效果
magento2如何调试LESS?

指令解释

 
grunt clean:var // 删除var/下的缓存文件
grunt deploy // 把app下的JS, LESS源代码通过转换与继承策略迁移到pub之下,让浏览器可以访问
grunt exec:mytheme // pub下的LESS, JS资源软链接到app里的源代码,使直接修改源代码可以马上生效
grunt less:mytheme // pub下所有less编译为css
(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(1)
100%
------分隔线----------------------------