gulp 源映射已创建但不起作用

Question

样式

无样式

@import "one.less";
@import "two.less";

少一个

body { background:red; }

二少

body { font-size: 12px; }

Gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');

gulp.src('./src/assets/less/styles.less')
  .pipe(less())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));

结果： styles.css+styles.map.css 被创建，但当我进入网页时地图文件没有加载（而且当我检查“body”时我看到了styles.css）

链接
吞掉少- https://github.com/plus3network/gulp-less
一饮而尽，sourcemaps - https://github.com/floridoo/gulp-sourcemaps

我很沮丧，我很感激任何帮助。谢谢。

Answer 1

less()在初始化 sourcemap 插件之前，您正在“管道” ，正确的方法是：

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');

gulp.src('./src/assets/less/styles.less')
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(less())//<<< between init and write
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));