gulp sass source map

gulp-sass github
gulp-sass not working
gulp-sass node 12
gulp-sourcemaps
gulp-autoprefixer
error: cannot find module 'gulp-sass'
gulp-sass minify
gulp-sass error

I need help adding source map to SASS compiler in the same CSS output folder. Till now, I got to install gulp-sourcemaps module within gulpfile.js but couldn't know success to bind sourcemaps.write as gulp.task.

Any help is much appreciated :)

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var bs = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
    server: {
        baseDir: "./"
    },
    proxy: {
        target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port]
        ws: true // enables websockets
    }
});
});

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css'))
        .pipe(bs.reload({
            stream: true
        }));
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.php").on('change', bs.reload);
});

Try this code for gulp task 'sass':

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css'))
        .pipe(bs.reload({
            stream: true
        }));
});

First init sourcemaps then compile sass() after that write sourcemap in the same folder ('.')

Regards

gulp-sourcemaps, To write external source map files, pass a path relative to the destination to sourcemaps.write() . Example: var gulp = require  I need help adding source map to SASS compiler in the same CSS output folder. Till now, I got to install gulp-sourcemaps module within gulpfile.js but couldn't know success to bind sourcemaps.write

I'm using this task since 5 months everyday and works fine,

const gulp            = require('gulp'),
      autoprefixer    = require('gulp-autoprefixer'),
      plumber         = require('gulp-plumber'),
      sass            = require('gulp-sass'),
      sourcemaps      = require('gulp-sourcemaps');

var sassSourcePath = 'YourPath/scss/**/*.scss',
    cssDestPath    = 'YourPath/css/';


gulp.task('sass', () => {

  return gulp
    .src(sassSourcePath)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(cssDestPath));

});

Also recommend you the require('gulp-csso') for the production version

gulp sass source map, Try this code for gulp task 'sass': gulp.task('sass', function() { return gulp.src('scss/​**/*.scss') .pipe(sourcemaps.init()) .pipe(sass())  By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a path relative to the gulp.dest() destination in the sourcemaps.write() function.

A complete solution for gulp-sass, map, count all files, minify:

./sass/partial_folders/index.scss

@import 'base/_reset';
@import 'helpers/_variables';
@import 'helpers/_mixins';
@import 'helpers/_functions';
@import 'base/_typography';
etc..

./gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function(){
    return gulp
            .src('sass/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(concat('styles.css'))
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./build/css/'));
});


gulp.task('default', function(){
    gulp.watch('sass/**/*.scss', ['styles']);
})

A Simple Gulp'y Workflow For Sass, This line tells npm to install both gulp and gulp-sass packages as a way to map compressed production sources with expanded development  gulp-sass sourceComments: 'map' in gulp-sass will enable source maps in Gulp. This inlines the source maps, meaning they are appended to the end of your CSS file itself.

dlmanning/gulp-sass: SASS plugin for gulp, gulp-sass Build Status Join the chat at https://gitter.im/dlmanning/gulp- npm css files building relates to the source sass folder Opened by Scorpovi4 about 1  This weekend I started playing around with gulp. I wanted to set up a task which can compile my sass files keep working if I make mistakes in the sass file work with sass Bootstrap generate sour

dlmanning/gulp-sass, Everything builds, the resulting CSS is what I would expect, but the sourcemap is off for the style from my custom.scss. It seems to be "stuck" on  How to add source map support to plugins. Generate a source map for the transformation the plugin is applying; Important: Make sure the paths in the generated source map (file and sources) are relative to file.base (e.g. use file.relative). Apply this source map to the vinyl file. E.g. by using vinyl-sourcemaps-apply. This combines the source

Sourcemaps > Gulp! Refreshment for Your Frontend Assets , scss file at line 4. Such mysterious magic goodness exists, and it's called a sourcemap. Using gulp-sourcemaps. Like with everything, this works via a plugin. Head  I'm using the latest versions of sass and compass and using gulp-compass to build. I'm getting .map sourcemap files even though I have set sourcemap=false in my config.rb file and have set the option