0

为我的 sass 生成源映射时，我的 gulpfile.js 出现问题。当我使用开发者工具检查一个元素时，它的来源显示为 _box-sizing.scss，而它的真正来源是 _header.sass。

这是我的 gulpfile.js 的摘录

var options = {
    styles: {
        "source": "public/sass/main.sass",
        "destination": "public/css",
        "sourcemaps": "sourcemaps",
        "sourceRoot": "../../sass/"
    }
}

gulp.task('styles', function() {
    return sass(options.styles.source, {sourcemap: true, style: 'compressed'})
        .on('error', function(err) { console.error('Error!', err.message); })
        .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
        .pipe(sourcemaps.write(options.styles.sourcemaps, {includeContent: false, sourceRoot: options.styles.sourceRoot}))
        .pipe(gulp.dest(options.styles.destination));
});

这会在 public/css/sourcemaps 中生成一个源映射。我的 .css 文件中的 sourceMappingURL 为 /*# sourceMappingURL=sourcemaps/main.css.map */

看起来像这样

{  
   "version":3,
   "sources":[  
      "main.css",
      "import/lib/_normalize.scss",
      "import/lib/neat/grid/_box-sizing.scss",
      "import/layouts/common/_header.sass"
   ],
   "names":[],
   "mappings":"AAAA,4ECQA,KACE,uBACA,0BACA,6BAA8B,CAOhC,KACE,QAAS,CAaX,2FAaE,aAAc,CAQhB,4BAIE,qBACA,uBAAwB,CAQ1B,sBACE,aACA,QAAS,CAQX,kBAEE,YAAa,CAUf,EACE,4BAA6B,CAQ/B,iBAEE,SAAU,CAUZ,YACE,wBAAyB,CAO3B,SAEE,gBAAiB,CAOnB,IACE,iBAAkB,CAQpB,GACE,cACA,eAAgB,CAOlB,KACE,gBACA,UAAW,CAOb,MACE,aAAc,CAOhB,QAEE,cACA,cACA,kBACA,uBAAwB,CAG1B,IACE,UAAW,CAGb,IACE,cAAe,CAUjB,IACE,QAAS,CAOX,eACE,eAAgB,CAUlB,OACE,eAAgB,CAOlB,GACE,uBACA,QAAS,CAOX,IACE,aAAc,CAOhB,kBAIE,iCACA,aAAc,CAkBhB,sCAKE,cACA,aACA,QAAS,CAOX,OACE,gBAAiB,CAUnB,cAEE,mBAAoB,CAWtB,0EAIE,0BACA,cAAe,CAOjB,sCAEE,cAAe,CAOjB,iDAEE,SACA,SAAU,CAQZ,MACE,kBAAmB,CAWrB,2CAEE,sBACA,SAAU,CASZ,gGAEE,WAAY,CAQd,qBACE,6BACA,sBAAuB,CASzB,mGAEE,uBAAwB,CAO1B,SACE,yBACA,aACA,6BAA8B,CAQhC,OACE,SACA,SAAU,CAOZ,SACE,aAAc,CAQhB,SACE,gBAAiB,CAUnB,MACE,yBACA,gBAAiB,CAGnB,MAEE,SAAU,CCnaV,KACE,qBAAsB,CAItB,qBAGE,kBAAmB,CCXzB,EACC,SAAU,CAAA",
   "file":"main.css",
   "sourceRoot":"../../sass/"
}

任何帮助，将不胜感激。谢谢

4

0 回答 0