嗨,我正在 Magento 2 中构建一个新主题,并从 luma 扩展了一个主题。
但是,当我对 less 文件进行任何更改以自定义外观时,我需要在每次更改 less css 文件后删除 pub 文件夹文件。
是否有任何设置(更少)或可以自动同步文件更改的方式?
嗨,我正在 Magento 2 中构建一个新主题,并从 luma 扩展了一个主题。
但是,当我对 less 文件进行任何更改以自定义外观时,我需要在每次更改 less css 文件后删除 pub 文件夹文件。
是否有任何设置(更少)或可以自动同步文件更改的方式?
有两种选择,一种是使用 grunt 进行服务器端编译,另一种是使用 less.js 进行客户端(浏览器)编译。
使用客户端应该更容易设置,但使用 Grunt 可能对您来说性能更高。为了简单起见,我将只讨论使用客户端。
这些说明只是从开发文档中复制而来的,参考文章底部的参考资料。
- 在 Magento Admin 中,将 LESS 编译模式更改为 client-side 下的STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Workflow type。
- 删除以下目录中的所有文件:
pub/static/frontend/<Your_Vendor>/<your_theme>
var/view_preprocessed/less
执行这些步骤后,您应该能够在更改 .less 文件后刷新页面。
参考:
你可以使用本地 node.js 来自动化这个过程
确保您在本地安装了 node.js
在项目文件夹 cmd "npm install" 中上传节点包
你准备好了,使用:
grunt refresh(开始或添加/删除较少的文件时);
grunt less(编译所有更少的文件);
grunt watch(观察较少文件的变化并自动编译它们);
grunt clean(删除所有临时文件)