Meine WENIGER sourceMap Datei „Datei“ fehlt, wenn

Question

durch Grunzen laufen Wenn ich lessc --source-map=styles.map assets/less/00_style.less dest/assets/prod.css in der Befehlszeile ausführen, alles funktioniert. Die styles.map Datei endet in:

...AV2rEF;EAAiB,aAAA","file":"dest/assets/prod.css"} 

Allerdings, wenn ich grunt less ausführen, wird die styles.map den "Datei" Teil fehlt und endet nur in:

...AV2rEF;EAAiB,aAAA"} 

Dies stoppt den SourceMap aus Arbeiten. Was könnte schief gehen? Mein weniger Config ist wie folgt:

less: { 
    dist: { 
     options: { 
      sourceMap: true, 
      sourceMapFilename: 'styles.map' 
     }, 
     files: [{ 
      src : 'assets/less/00_style.less', 
      dest: 'dest/assets/prod.css' 
     }] 
    } 
} 

Answer 1

Kurze Antwort:

Fügen Sie die folgende zusätzliche Option, um Ihre less Aufgabe in Gruntfile.js:

... 
options: { 
    ... 
    sourceMapURL: '../../styles.map' 
}, 
... 

---

Lange Antwort:

Wenn Sie über die CLI den lessc Befehl ausgeführt wird, (nach Ihrem Beispiel), wird Mitteilung der folgende Kommentar zu der resultierenden prod.css geschrieben:

/*# sourceMappingURL=../../styles.map */ 

Wenn jedoch die grunt Aufgabe ausgeführt wird, (mit Ihre aktuelle config), der folgende Kommentar wird in die resultierende prod.css geschrieben:

/*# sourceMappingURL=styles.map */ 

Beachten Sie die fehlenden ../../ - deshalb prod.css nicht finden können, styles.map

Aus diesem Grund Ihre SourceMap nicht funktioniert und nicht so sehr mit dem "file:" fehlt in styles.map zu tun, wenn über grunt laufen. Die Datei .css verweist schließlich auf die Datei .map - nicht umgekehrt.

Auch nach dem Ausführen des Befehls lessc über die CLI und Löschen der "file:" Teil von styles.map werden Sie feststellen, dass die SourceMap noch im Browser funktioniert. Angeben, dass der "file:"-Teil, unabhängig davon, ob er in der .map-Datei enthalten ist oder nicht, keinen Einfluss auf die Funktion von SourceMap hat.

Außerdem, wie in der jüngsten vorgeschlagenen SourceMap spec (v.3) stellte der "file:" Teil ist optional:

Zeile 3: Ein optional Name des generierten Codes, dass diese Quelle Karte zugeordnet ist, mit.

Explizit Definition der sourceMapURL in Ihre Optionen Grunzen Aufgabe wird mit sich bringen eine flache Ordnerstruktur innerhalb des dest/assets/ Verzeichnis zu halten haben, wenn Sie auf die Verwendung mehrerer .less Dateien möchten.(z. B. müssen Sie die resultierenden .css Dateien in Unterordnern nicht speichern)