Magento 2 less 工作流程建议

Question

我很难在 less 中找到特定的样式规则，快速查找和修改默认 less 文件的规则和结构的理想工作流程是什么？

Answer 1

Magento 文档在这里非常有用 - http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

Source maps 可能是最好的 LESS 调试工具。

对于客户端编译配置 lib/web/less/config.less.js 中的选项。您想要的选项是：

dumpLineNumbers

Type: String Options: ''| 'comments'|'mediaquery'|'all' Default: ''

When set, this adds source line information to the output css file. This helps you debug where a particular rule came from. - http://lesscss.org/usage/#using-less-in-the-browser

如果你想要服务器端编译，你可以使用 Magento 2 内置的 grunt。检查 dev/tools/grunt/configs/less.js 文件，它显示

var lessOptions = {
options: {
    sourceMap: true,
    strictImports: false,
    sourceMapRootpath: '/',
    dumpLineNumbers: false, // use 'comments' instead false to output 
    ...

该文档将逐步指导您使用 Grunt，或设置无客户端编译。

Magento 2 less 工作流程建议

Magento 2 less workflow suggestions

less

magento2