源代码映射根路径：如何使用LESS生成sourcemaps

Question

我正在尝试在我的项目中使用源映射。我正在使用LESS，通过grunt-contrib-less编译的Grunt。

这是我在gruntfile.js中的代码：

less: {
  development: {
    options: {
      paths: ["assets-src"],
      // LESS source maps
      // To enable, set sourceMap to true and update sourceMapRootpath
         based on your install
      sourceMap: true,
      sourceMapFilename: 'assets-src/desktop/css/desktop.css.map',
      sourceMapRootpath: 'assets-dist/desktop/css/'
    },
    files : {
      "assets-src/desktop/css/desktop.css" :
      [
      "assets-src/desktop/less/reset.less",
      "assets-src/desktop/less/variables.less",
      "assets-src/desktop/less/mixins.less" 
      ]
    }
  }
 }

这是我拥有的文件结构:

我在定义sourceMapRootpath时遇到了问题。我尝试将其放在所有.LESS文件所在的同一文件夹中，但没有任何反应，使用.CSS文件所在的文件夹也是一样。

对此有什么想法吗？

谢谢！ seba

- sebazelonka

Answer 1

我刚刚通过将参数“outputSourceFiles”设置为true来解决了这个问题。您需要添加此参数，因为LESS的sourceMapping与您的express服务器根目录相关。我几乎可以确定你的是assets-dist。顺便说一下，您应该在gruntfile中有这个：

enter code here
      outputSourceFiles: true, // with this param you'll have your less in your map and you can see it
      sourceMap: true,
      sourceMapFilename: 'path/to/your/map', 
      sourceMapURL: '/complete/url/to/your/map', 
      sourceMapBasepath: 'public'

- Eric

---

谢谢，这个应该放在文档里，我找了三个小时才找到。 - uladzimir

Answer 2

我猜您正在使用已过期的grunt-contrib-less版本，因为我遇到了同样的问题。查看发布历史，发现对LESS的源映射支持是最近才添加的。

检查您的package.json文件，并确保您的grunt-contrib-less版本将安装最新的0.9.0版本，然后使用npm install进行安装。

- James Lai