相对于文件系统而不是网站的更少 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 文件删除到您的公共文件夹（或让 Web 服务器访问 less 文件夹）

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

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

上面将地图连同您的 Less 文件的内容放入 CSS 文件中。