2015-02-10 97 views
1

我的目錄結構如下:調試LESS與Chrome開發者工具

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文件夾裏面是使用命令be從style.less編譯到style.css和style.css.map的style.css文件在低node.js的命令提示符:

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

然後我少裝了中間件:

npm install less-middleware 

我試圖弄清楚爲什麼我不能在Chrome少直接調試,因爲我已經啓用CSS源Chrome開發工具中的地圖。

謝謝。

回答

1

Chrome開發人員工具將不會反映.LESS文件,如果在.css文件的末尾源地圖的網址無效

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

而應該是

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

假設風格.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"} 

希望有人會發現這有幫助。

相關問題