Не корректно работает emmet livestyle, так же не отображаються переменные SCSS в отладчике. Как исправить?

Question

[Андрей Прозоров]

Проблемы сразу две но они однокоренные.
1) В отладчике хрома отображаются вместо переменных (SCSS) их скомпилированные значения.

$base-font-size: 16px;
&__text-line {
            color: white;
            margin-top: 20px;
            font-size: $base-font-size*2;        
            font-weight: normal;
}

Результат:


2) Плагин Emmet livestyle при редактировании чего либо вместо внесения изменения в существующий каскад создает в конце файла новый:

.b-body{
    &__text-line{
           @media  #{$xsm}, #{$sm} {                
                font-size: $base-font-size  + 12px;
            }
    }
}

Редактируем размер шрифта и получаем:


Тут целый набор косяков 1. не расползались переменные 2. Не распознаётся в отладчике символ & 3. создался новый каскад внизу файла...

прилагаю gulp task где я генерю css и создаю source map:

var gulp = require('gulp'),
     sourcemaps = require('gulp-sourcemaps'),
     compass = require('gulp-compass'),
     autoprefixer = require('gulp-autoprefixer'),
     clean = require('gulp-clean'),
    browserSync = require('browser-sync');
    

//clean css fold
gulp.task('cleancss', function () {
    return gulp.src('./develop/css/*.*', {read: false})
	.pipe(clean({
        force: true
    }));
});

//compass main.css
gulp.task('compass', ['cleancss'], function() {
  gulp.src('./develop/scss/**/*.scss')
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(compass({
      config_file: './config.rb',
	  sourcemap: true,
          css: 'develop/css',
          sass: 'develop/scss'
    }))
    .on('error', function(error){
      console.log(error);
    })
    .pipe(autoprefixer({browsers: ['last 2 version', '> 2%', 'firefox 15', 'safari 5', 'ie 6', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']}))
    .pipe(sourcemaps.write())		
	.pipe(gulp.dest('./develop/css'))
	.pipe(reload({stream:true}));		
	
});

Comments

[Андрей Прозоров]

MaxKorz: я не брал=) я так где то и предпологал, но хотелось надеяться что все таки умеет. я использовал так же Canary все идентично. И что нет выхода из ситуации?

[Андрей Прозоров]

MaxKorz: собственно проблема не только и не столько в переменных сколько в том что при редактировании с devtools livstyle создает новый каскад, вместо редактирования. Про переменные я тут писал для полноты проблемы. Я ведь не знал что не будут они отображаться так как так и задумано. Знал бы писал бы только про косяк с новым каскадом

Answer 1

[Андрей Прозоров]

Нашел решение, может кому пригодиться=)) Livstyle нормально зработал!!!!

итак:
.pipe(sourcemaps.init()
1) вешаем после формирования css.
2) указываем инструкцию {loadMaps: true}.
3) запись sourcemaps.write(".") обязательно полсе префиксера, тк префиксер трет комментарий /*# sourceMappingURL=main.css.map */
итог у меня получилось:

//compass main.css
gulp.task('compass', ['cleancss'], function() {
	gulp.src('./develop/scss/main.scss')	
	.pipe(compass({
		config_file: './config.rb',
		sourcemap: true,
		css: 'develop/css',
		sass: 'develop/scss'
	}))
	.on('error', function(error){
		console.log(error);
	})		
	.pipe(sourcemaps.init({loadMaps: true}))
	.pipe(autoprefixer({
		browsers: ['last 2 version', '> 2%', 'firefox 15', 'safari 5', 'ie 6', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
	}))
	.pipe(sourcemaps.write("."))
	.pipe(gulp.dest('./develop/css'))
	.pipe(reload({stream:true}));		
	
});

Answer 2

[iBird Rose]

ну тк devtools у хрома показывает ксс. а по map он смотрит только пути в scss. он и не должен тебе показывать переменные. он показывает твой сгенерированный css. а чтобы ты не запутался где править - он показывает номер строки в scss. и все. на большее отладчик хрома не способен

Comments

[Андрей Прозоров]

Такая ситуация только у хрома? Зачем тогда интересно разработан livestyle, по факту он бесполезен, просто красивая и бесполезная игрушка=))

[Андрей Прозоров]

MaxKorz: собственно на видео чел правит с отладчика размер ширифта и цвет, и у него все это попадает в нужный стиль в редакторе, и даже перменная с цветом не заменяться на скомпиленный цвет. у меня же вообще создаеться новый каскад внизу файла scss а собственно сам каскад откуда изначально брался стиль остается не затронутым. я это отобразил на скринах. я предположил что у меня какой то не порядок в source map но сделано все по инструкции, где косяк я так и не понял.

В целом меня бы устроила работа плагина как на видео=)) как этого вот только достичь

[Андрей Прозоров]

MaxKorz: обратите внимание на скрине на номер строки в отладчике и на номер строки справа в редакторе https://habrastorage.org/files/646/3d4/619/6463d46...