使用 Chrome 开发者工具调试 LESS

Question

我的目录结构如下：

    css/style.css
        style.css.map
    less/style.less

index.html

我创建了一个简单的 index.html 文件，如下所示：

<head>
<link type="text/css" rel="stylesheet" media="all" href="css/style.css">
</head>
<body>
<div id='box'></div>
</body>

style.less如下：

@bgcolor: green;

#box {
width: 200px;
height:200px;
background: @bgcolor;
}

在 css 文件夹中是从 style.less 编译成 style.css 和 style.css.map 的 style.css 文件，在 [=36] 上使用下面的命令=] 命令提示符：

lessc less/style.less > css/style.css --source-map=css/style.css.map --source-map-basepath=css

然后我安装了less中间件：

 npm install less-middleware

我想弄清楚为什么我不能直接在 Chrome 上进行 less 调试，因为我已经在 Chrome 开发工具上启用了 CSS 源映射。

谢谢。

Answer 1

如果 .css 文件末尾的源映射 url 无效，chrome 开发人员工具将不会反映 .less 文件

/*# sourceMappingURL=css/style.css.map */

应该是

/*# sourceMappingURL=style.css.map */

假设 style.css.map 与 style.css 文件位于同一目录中。

此外，确认.css.map文件中的url是否有效也是一个需要注意的因素！

{"version":3,"sources":["../less/style.less"],"names":[],"mappings":"AAAA;EAIA,gBAAA;;AAJA,GAKA;EACA,UAAA;EACA,eAAA;;AAPA,GASA;EACA,YAAA;EACA,eAAA;;AAXA,GAaA;EACA,WAAA;EACA,eAAA;;AAIA;EAKA,mBAAA;;AALA,GAOA;EACA,aAAA;EACA,eAAA;;AATA,GAWA;EACA,aAAA;EACA,eAAA","file":"..\undefined"}

希望有人会觉得这有用。

使用 Chrome 开发者工具调试 LESS

Debug LESS with Chrome Developer Tools

less

node.js

google-chrome-devtools