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，因为我遇到了同样的问题。从发布历史来看，源映射支持是最近才添加到 LESS 中的。

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