较少的 SourceMap 文件位置相对于文件系统，而不是网站

Question

我的文件结构如下所示（为简洁起见进行了简化）：

/less/
     /styles.less
/public/
       /css/
           /styles.css
           /styles.css.map
       /images/
       index.php
/gruntfile.js

Gruntfile.js:

less: {
    options: {
        sourceMap: true,
        sourceMapFilename: 'public/css/styles.css.map',
        sourceMapURL: '/css/styles.css.map',
        sourceMapRootpath: '/'
    }
    files: {
        'public/css/styles.css': 'less/styles.less'
    }
}

在索引文件中：<link rel="stylesheet" href="/css/styles.css">

现在在开发工具中，它正在 http://localhost:3845/less/styles.less 中寻找 styles.less，但它不存在，因为只有 /public/ 暴露在网站上。

它过去常常将文件正确映射到我的本地计算机，无需任何额外步骤，但现在不会了。我不确定发生了什么或如何设置它。

我正在使用最新的 grunt-contrib-less (1.0.0)。

Answer 1

浏览器无法读取 less 文件夹，因此请将 Less 文件删除到 public 文件夹（或让 Web 服务器访问 less 文件夹）

或者设置 Less 的 source-map-less-inline 和 source-map-map-inline 选项：

options: {
sourceMap: true,
sourceMapFileInline: true,
outputSourceFiles: true
}

上面将带有 Less 文件内容的地图放入 CSS 文件中。

较少的 SourceMap 文件位置相对于文件系统，而不是网站

Less SourceMap file location relative to filesystem, not website

javascript

gruntjs

less

source-maps

grunt-contrib-less