Question

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

e.g。

/* 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不可能。来自node-sass成员的回答：

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

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

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

Link to Github discussion

讨论libsass：Link

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

1 个答案: