Gulp 中的 sourceComment 显示相对于计算机的路径，而不是文件夹

Question

我一直在为我正在处理的项目做 sourceComments 以及在 CSS 中输出的注释，以便我可以找到正确的 scss 文件，这些注释显示了与我的计算机相关的路径

例如

/* line 39, /Applications/MAMP/htdocs/usaa/bare-minimum/framework/scss/settings/_typography.scss */

我希望这是

/* line 39, settings/_typography.scss */

当这是我的gulpfile时，我将如何完成此操作.js(此处显示sass函数(

var sassSrc = './framework/scss/*.scss';
var watchSrc = './framework/**/*.scss';
function doSass(cb) {
  gulp.src([sassSrc, watchSrc], {
      base: 'framework/scss'
    })
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true,
      soureMap: 'scss',
      sourceComments: 'map'
    }).on('error', sass.logError))
    .pipe(cmq())
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dev/css/'))
    .pipe(cssmin())
    .pipe(rename({
      extname: '.min.css'
    }))
    .pipe(gulp.dest('dev/css/'))
    .on('end', function() {
      if (cb && typeof cb === 'function')
        cb();
    });
}
gulp.task('sass', doSass);

Answer 1

不幸的是，

LibSass不可能做到这一点。来自节点成员的答案：

使用 sourceComments 选项，libsass 会为它遇到的每个选择器发出诊断信息。 它应该是原始调试信息，因此路径没有(相对(解析。

更严重的是，此信息来自核心抽象语法树，其中解析规范文件路径会降低整体编译的性能。

对于浏览器开发工具的帮助，请使用 sourceMap 选项，因为 source-map 带有相对路径。

链接到 Github 讨论

关于libsass的讨论：链接