css - Gulp gulp-less 和 gulp-sourcemaps 给出了错误的 sourceMappingURL

Question

我有一个简单的 less 任务的 gulp 工作流程，如下所示:

gulp.task('less', function() {
    gulp.src(source_less)
        .pipe(sourcemaps.init())
        .pipe(less({
            sourceMap: true
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(dest_less));
});

我希望 gulp-sourcemaps 模块在我的 CSS 文件中将源映射显示为内联注释。但是每当 gulp 编译我的 LESS 时，gulp-sourcemaps 都不会显示我的源文件的路径。相反，它显示如下内容:

/*#     sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
        VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
        ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
        sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */

我极大地简化了我的 gulpfile，删除了 livereload、autoprefixer 等。但即使在这个精简版中，我也无法获得正确的源 URL。

处理这件事已经有一段时间了，非常感谢任何帮助!

Answer 1

您已经在其中内嵌了源 map 。如果您对 sourceMappingURL=data:application/json;base64, 之后的内容进行 base64 解码，您将得到:

{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n    background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}

在这里自己试试:https://www.base64decode.org/