用gulp-sass输出已编译CSS中SCSS文件的行号

Question

我最近从 Grunt 切换到 Gulp task runner。

是否可以将已编译的 CSS 文件中的行号作为注释输出，以指示给定规则在 SASS 文件中的来源？

当我使用 grunt-contrib-compass 模块时，默认情况下启用了此功能。

现在我正在使用 gulp-sass 来编译我的 sass 文件。

Answer 1

是的，您可能需要传递正确的选项：

.pipe(sass({
  sourceComments: 'map',
  sourceMap: 'sass',
  outputStyle: 'nested'
}))

Answer 2

您需要按如下方式初始化gulp-sourcemaps：

const sourcemaps = require('gulp-sourcemaps');

function buildStyles() {
  return gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./css'));
}

exports.buildStyles = buildStyles;

然后您将获得对源 scss 的很好的嵌入式引用：

检查文档 https://github.com/dlmanning/gulp-sass

用gulp-sass输出已编译CSS中SCSS文件的行号

Output the line number from the SCSS file in compiled CSS with gulp-sass

css

sass

gulp

gulp-sass