sourceMapRootpath使用LESS获取源图

Question

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

以下是我在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文件所在的文件夹也一样。

对此有什么想法吗？

谢谢！ 西巴

Answer 1

我刚刚通过将参数“outputSourceFiles”设置为true来解决此问题。你必须添加这个参数。因为LESS的sourceMapping与您的快速服务器根相关。我几乎可以肯定你的是资产。顺便说一下，你应该在你的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'

Answer 2

我将假设您使用过时版本的grunt-contrib-less，因为我遇到了同样的问题。查看release history，最近才向LESS添加了源地图支持。

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