i_d_1
@i_d_1
Программист PHP

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

Проблемы сразу две но они однокоренные.
1) В отладчике хрома отображаются вместо переменных (SCSS) их скомпилированные значения.
$base-font-size: 16px;
&__text-line {
            color: white;
            margin-top: 20px;
            font-size: $base-font-size*2;        
            font-weight: normal;
}

Результат:
7e0bebc426114583b419968b158b3774.png

2) Плагин Emmet livestyle при редактировании чего либо вместо внесения изменения в существующий каскад создает в конце файла новый:
.b-body{
    &__text-line{
           @media  #{$xsm}, #{$sm} {                
                font-size: $base-font-size  + 12px;
            }
    }
}


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

Тут целый набор косяков 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}));		
	
});
  • Вопрос задан
  • 205 просмотров
Решения вопроса 1
i_d_1
@i_d_1 Автор вопроса
Программист PHP
Нашел решение, может кому пригодиться=)) 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}));		
	
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
ну тк devtools у хрома показывает ксс. а по map он смотрит только пути в scss. он и не должен тебе показывать переменные. он показывает твой сгенерированный css. а чтобы ты не запутался где править - он показывает номер строки в scss. и все. на большее отладчик хрома не способен
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы