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(责任编辑:好模板) |