将Sourcemaps与Google Chrome结合使用

Question

我尝试在较少的文件中配置源图。当我检查一个元素时，我看到带有文件扩展名的正确文件。所以似乎工作

但是当我更改示例style.less的文件名时：1120更改为style.css：129

出了什么问题？

另一个问题是，chrome只显示了style.less文件。此文件仅导入我的组件。所以没有看到component.less：10我看到style.less：221

我的gulpfile：

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

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*',
  less: 'web/style/style.less'
}; 

gulp.task('less' , function() {
  // Minify and copy all JavaScript (except vendor scripts) 
  // with sourcemaps all the way down 
  return gulp.src(paths.less)
    .pipe(sourcemaps.init())
      .pipe(less())
      .pipe(rename(function(path) {
        path.extname = ".css";
      }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('web/style/.'));
});

// Rerun the task when a file changes 
gulp.task('watch', function() {
  gulp.watch(paths.less, ['less']);
});

// The default task (called when you run `gulp` from cli) 
gulp.task('default', ['watch']);