如何让sourcemaps使用gulp包含所有my LESS文件

我的/LESS文件夹中少了两个文件：

main.less：

@import 'vars';

body{
  background-color: @blau;
}

和无变量

@blau : #6621ab;

使用gulp less和gulp sourcemaps的我的gulp任务

gulp.task('less', function () {
  gulp.src('./less/main.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/'))
});

---

CSS生成（at/public/main.CSS）工作正常，但在sourcemaps中，我只能看到main.less，不能看到vars.less。有什么想法吗？提前感谢

据我所知，您的配置生成以下sourcemap代码：

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFLHlCQUFBIiwiZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAndmFycyc7XG5cbmJvZHl7XG4gIGJhY2tncm91bmQtY29sb3I6IEBibGF1O1xufVxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */

编码版本：

{"version":3,"sources":["main.less"],"names":[],"mappings":"AAEA;EACE,yBAAA","file":"main.css","sourcesContent":["@import 'vars';\n\nbody{\n  background-color: @blau;\n}\n"],"sourceRoot":"/source/"}

您的

vars.less

不会向CSS生成任何输出，因此不应包含在sourcemap中

只要

vars.less

生成输出，例如在该文件末尾添加

.selector{p:1；}

，该文件也将包含在源映射中：

{"version":3,"sources":["vars.less","main.less"],"names":[],"mappings":"AACA;EAAW,IAAA;;ACCX;EACE,yBAAA","file":"main.css","sourcesContent":["@blau : #6621ab;\n.selector {p:1;}\n","@import 'vars';\n\nbody{\n  background-color: @blau;\n}\n"],"sourceRoot":"/source/"}

请注意，LESC编译器对源映射有不同的选项：

  --source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
  --source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
  --source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
  --source-map-less-inline puts the less files into the map instead of referencing them
  --source-map-map-inline  puts the map (and any less files) into the output css file
  --source-map-url=URL     the complete url and filename put in the less file

---

gulp sourcemaps输出的结果与使用

--source map less inline

和

--source map inline

选项编译的结果相同！！通过将

gulp.src（'./less/main.less'）

替换为

gulp.src（'./less/*.less'）

其生成的vars.css文件，以及它自己的源映射。然后，将vars.css包含到我的html中，我可以看到它的源代码：D您知道将vars.less sourcemapping包含到main.css中的任何技术吗，所以我只需要包含一个文件？谢谢你的时间！