javascript - gulp sourcemap 已创建但无法正常工作

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，但是当我进入网页时 map 文件没有加载(而且当我检查“body”时我看到了样式。 CSS)

链接
少喝 - https://github.com/plus3network/gulp-less
gulp-sourcemaps - https://github.com/floridoo/gulp-sourcemaps

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

Answer 1

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

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/'));