javascript - 相对于文件系统而不是网站的较少 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">

现在在开发工具中，它正在寻找 styles.less在http://localhost:3845/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
}

以上内容将 map 以及 Less 文件的内容放入 CSS 文件中。