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

npm install -g grunt-clinpm install

如果你使用自己的主题，你还需要在grunt的配置文件里追加less的配置

// dev/tools/grunt/configs/themes.js
mytheme: {
area: 'frontend',
name: '/',
locale: 'en_US',
files: [
'css/styles-m',
'css/styles-l'
],
dsl: 'less'
}
然后使用以下代码可进行less编译

grunt clean:pubgrunt deploygrunt less:mytheme

完成以上过程，可以在浏览器的调试器里看到LESS的定位。但你会马上发现，deploy的过程相当漫长，你所修改主题下的less不会马上生效，需要再执行以上操作才可以。开发效率非常低，有什么办法？

magento官方并没有说明该怎么调试less，就像把问题扔给开发者，只能硬着头皮去解决了。magento2所有外部访问的static资源都会被复制或者编译到pub/static/下，deploy操作正是往pub/static增文件，而开发者所修改的LESS在design下，所以样式不会被更新，需要先deploy一次。为了让pub/static下所有的less都可以根据design下的less更新，我编写了以下bash脚本

!/bin/bash

PATH="/var/www/html//"
THEME="frontend///"
LOCATE=("en_US")

APP_PATH="app/design/"
STATIC_PATH="pub/static/"
EMPTY=""

cd "$PATH$APP_PATH$THEME"
for f in $(/bin/find -type f -name "*.less")
do
f=${f/.\//$EMPTY}
SUB_APP_PATH="$PATH$APP_PATH$THEME$f"
f=${f/web\//$EMPTY}

for l in ${LOCATE[*]}do    /bin/rm -f $PATH$STATIC_PATH$THEME$l/$f    /bin/ln -s $SUB_APP_PATH $PATH$STATIC_PATH$THEME$l/$fdone

done
执行以上脚本，design下所有的less都会在pub/static下创建软链接，less会即时被更新。
当每次修改less后，需要执行 grunt less:mytheme，只需两三秒就会把修改更新到页面上。

参考：http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

关键字：magento2

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！