gulp autoprefixer дает недопустимое содержимое значка font-awesome

Я только что настроил следующую задачу Gulp для SASS, используя gulp-autoprefixer, что вызывает проблему с обработкой «содержимого» значка с потрясающим шрифтом.

Как это работает (без gulp-autoprefixer)

gulp.task('sass', function() {

  gulp.src(['./src/vendor/style.scss',
        './src/app/style.scss'])
      .pipe(sourcemaps.init())
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(concat('style.css'))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./public/css'));

});

Это нормально работает и дает ожидаемый результат.

Пример пользовательского значка (без gulp-autoprefixer):

.fa-user:before {
    content: "";
}

Как ломается (с gulp-autoprefixer)

Если я сейчас добавлю к этой задаче автопрефиксатор - например:

gulp.task('sass', function() {

  gulp.src(['./src/vendor/style.scss',
        './src/app/style.scss'])
      .pipe(sourcemaps.init())
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(concat('style.css'))
      .pipe(prefix({
        browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'],
        cascade: false
      }))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./public/css'));

});

Вывод прерывается. Вот что я получаю для пользователя fa-user (с gulp-autoprefixer):

.fa-user:before {
    content: "";
}

Похоже, проблема с кодировкой (UTF-8 / UTF-16).

Есть ли возможность избежать такого поведения с помощью gulp-autoprefixer?


gulp font-awesome autoprefixer gulp-sass
person wildhaber    schedule 01.08.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Что ж, даже это было странное поведение (потому что оно хорошо работало без gulp-autoprefixer), решение оказалось проще, чем я думал.

Я пропустил добавление метатега кодировки UTF-8 в документы <HEAD>.

Итак, этот тег исправил это:

<meta charset="UTF-8">
person wildhaber    schedule 01.08.2015

arrow_upward
0
arrow_downward

Я также столкнулся с этой проблемой, изменив порядок компилятора sass и префикса, исправив его для меня. Сначала префиксер, затем компилятор sass:

.pipe( autoprefixer({ browsers: ['> 1%', 'last 3 versions'], cascade: false }) ) .pipe( sass({ outputStyle: 'compressed', includePaths: [] }).on('error', error) )

person jhukdev    schedule 29.03.2018