Почему Chrome не видит sourcemap карты?

Question

[Максим Алёшин]

вот sass таск gulp.task('sass', function(){
gulp.src('./app/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./app/css'));
});

Как я понимаю, после проделанных манипуляций, Chrome должен видеть файлы с расширением .scss но результата нет. Что делать? Есть советы?

Answer 1

[Максим Алёшин]

Баг текущей версии libsass. Нужно ставить sass 3.3.3

Answer 2

[Дмитрий Христоев]

у меня так, сверху
var plugins = require("gulp-load-plugins")();
снизу

gulp.task('sass', function() {
  gulp.src('./sass/main.sass')
    .pipe(plumber())
    .pipe(plugins.sourcemaps.init())
    .pipe(sass({
        includePaths: ['./assets/css/'],
        onError: browserSync.notify
    }))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: true
    }))
    // .pipe(uncss({
    //    html: ['*.html']
    // }))
    .pipe(plugins.sourcemaps.write("./"))
    .pipe(gulp.dest('./dist/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifyCss())
    .pipe(gulp.dest('./dist/css/'))
    .pipe(browserSync.reload({stream:true}));
});

Comments

[Максим Алёшин]

Я плоховато js знаю, да и куча тут всего мне не нужного. Вроде всё так же, а не видит.

[Дмитрий Христоев]

с@mrwoo: в конце css есть строка типа /*# sourceMappingURL=main.css.map */

[Максим Алёшин]

В конце css, да есть, Но имя файла main.scss хром не видит.

[Максим Алёшин]

Дмитрий Христоев: Вообщем это баг текущей версии libsass. Вот по чему не видит.

Answer 3

[Sergey Mes]

Решил проблему!
Вот путь который прописывается в конце css.
/*# sourceMappingURL=main.css.map */
он должен совпадать c файлом карт.

gulp.task('style:build', function () {
return gulp.src(path.src.style)
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: ['src/style/'],
errLogToConsole: true
}))
.pipe(prefixer({
browsers: ['last 5 versions'],
cascade: true
}))
.pipe(cleanCSS({compatibility: 'ie8'})) //Сожмем
.pipe(sourcemaps.write('.'))
.pipe(plumber.stop())
.pipe(gulp.dest(path.build.css)) // И в build
.pipe(reload({stream: true})) //И перезагрузим сервер
});