Source Map 中的来源错误 Gulp

Question

我正在尝试使用 Gulp 和 gulp-sourcemaps 创建一个有效的 Source Map。 Source Map 实际上已创建，但在内部，"sources" 参数未加载我的 SASS 文件的适当路径。这是我得到的：

"version":3,"file":"style.css","sources":["style.css"]

当我需要加载这样的东西时（由 Koala App 创建）：

"version":3,"file":"style.css","sources": ["../sass/style.scss","../sass/typography/_fonts.scss","../sass/helpers/_variables.scss"........

这是我的Gulp任务

 gulp.task('sass', function () {
  return gulp.src('style/sass/**/*.scss')
  .pipe(sass(
    {
      'outputStyle': 'expanded'
    }
  ))
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write('.')
  .pipe(gulp.dest('./style/css'))
  .pipe(bs.reload({stream: true}));
});

谢谢你的时间。

Answer 1

sourcemaps.init() 必须在 sass 管道之前 ，所以：

gulp.task('sass', function () { return gulp.src('style/sass/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass( { 'outputStyle': 'expanded' }).on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest('./style/css')) .pipe(bs.reload({stream: true})); });

参见gulp-sass with sourcemaps。

出于某种原因，您有两个 sass 调用，删除第一个并将其选项放入第二个 sass 管道调用。

Source Map 中的来源错误 Gulp

Sources are wrong in Source Map with Gulp

sass

gulp

source-maps

gulp-sourcemaps