用Chrome开发人员工具debuggingLESS
我的目录结构如下：
css/style.css style.css.map less/style.less index.html 我创build了一个简单的index.html文件，如下所示：
<head> <link type="text/css" rel="stylesheet" media="all" href="css/style.css"> </head> <body> <div id='box'></div> </body>
风格如下：
@bgcolor: green; #box { width: 200px; height:200px; background: @bgcolor; }
在css文件夹中，使用下面的命令在style.js命令提示符下将style.css文件从style.less编译为style.css和style.css.map：
lessc less/style.less > css/style.css --source-map=css/style.css.map --source-map-basepath=css
然后，我安装了较less的中间件：
npm install less-middleware
我试图找出为什么我不能直接在Chrome上debugging较less，因为我已经在Chrome开发工具上启用CSS源地图。
谢谢。
如果.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"}
希望有人会觉得这有帮助。