Как смотреть строки написанные на Sass в google chrome?

Question

[edu30151]

Пишу css на sass. Все компилю и минифицирую через gulp. В хроме в отладчике показывается одна строка моего минифицированного css к примеру main.min.css. Как сделаать так чтоб свойства селектов показывало строки файла sass к примеру main.sass. Видел на youtube что такое возможно. Подскажите пожалуйста. Искал в интернет статьях, но в новых версиях нет такого функционала как описывается: в настройках —> Experiments--> Sass stylesheet debugging. Я так понимаю надо создать sourse map и ее подключить. Как Вы это делаете? Или как это сделать через gulp?
Спасибо!

Comments

[edu30151]

Да и когда подключаю bourbon выдает ошибку;
events.js:154
throw er; // Unhandled 'error' event
^
Error: "/node_modules/bourbon/app/assets/stylesheets/_bourbon.scss" is not in t
he SourceMap.

В main.sass подключено как через import "bourbon"
без source map работает

[sim3x]

edu30151: отредактируй вопрос и добавь свои ошибки туда

Answer 1

[Кирилл]

https://www.npmjs.com/package/gulp-sourcemaps

Comments

[edu30151]

А можете свой рабочий конфиг выложить для таска style где есть sass и sourcemaps?
Почему спрашиваю. Строки sass файла появились в хроме. Но по номеру не совпадают... Вообще не те строки.
Может я не так что делаю
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
browserSync = require('browser-sync').create(),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglifyjs');

gulp.task('styles', function () {
return gulp.src('sass/*.sass')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 10 versions'], cascade: false}))
.pipe(sourcemaps.write())
.pipe(rename({suffix: '.min', prefix : ''}))
.pipe(minifycss())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream());
});

[Кирилл]

edu30151: Sass не использую, конфига щас под рукой тоже нету. Рискну предположить, что у вас порядок выполнения тасков не тот. Конкретнее подсказать не могу, не силен в этом)

Answer 2

[Web Developer Blog]

Дополнение, так в названии и будет