CODEWITHSUNDEEP
csssassgulpgulp-sass
luqo33
luqo33

Reputation: 8361

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

I've recently switched from Grunt to Gulp task runner.

Is it possible to output as comment the line number in the compiled CSS files that would indicate where a given rule came from in the SASS file?

Such feature was enabled by default when I was using grunt-contrib-compass module.

Now I'm using gulp-sass for compiling my sass files.

Upvotes: 4

Views: 3538

Answers (2)

lrkwz
lrkwz

Reputation: 6543

You need to init gulp-sourcemaps as the following:

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;

then you'll get nice embedded references to your source scss:

enter image description here

check docs https://github.com/dlmanning/gulp-sass

Upvotes: 0

deowk
deowk

Reputation: 4318

Yes it is possible you need to pass it the right options:

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

Upvotes: 14

Related Questions