PostCSS: плагин PxToRem

Question

Я очень новичок в использовании Node.js и использовании пост-процессоров для CSS. После прочтения нескольких статей, мне удалось установить следующее:

1. Node.js (который включал НПМ)
2. Глоток
3. PostCSS
4. Pxtorem (плагин PostCSS для Глоток)

То, что я хотел бы сделать, это включить плагин «pxtorem», чтобы преобразовать мои пиксельные единицы в резервные копии для следующих свойств CSS: размер шрифта, маржа, отступы, границы, ширина, высота и т. Д. И выводят результаты в новой таблице стилей CSS.

Вопрос: Что именно мне нужно ввести в свой файл gulpfile.js, чтобы сделать эту работу?

Чтобы повторить, я совершенно новый, когда дело доходит до ввода переменных и требований, и следовали примерам видео и блога, ни одна из которых специально не содержит правильную формулу для преобразования пикселей в беты (поскольку для PostCSS существует много плагинов).

Это то, что я в настоящее время в моем текущем gulpfile.js:

var gulp = require('gulp'); 
var postcss = require('gulp-postcss'); 
var pxtorem = require('gulp-pxtorem'); 

gulp.task('css', function() { 
gulp.src('./css-1/*.css') 
    .pipe(pxtorem()) 
    .pipe(gulp.dest('./dest')); 
}); 

Что выше, по существу, делают, захватывая мой «стиль-1.css» файл стилей находится в моем «CSS-1» и сделать его дубликат в моей папке «dest». Я набрал этот код в соответствии со статьей, которую я читал, чтобы понять, как работает PostCSS, но, очевидно, это не правильный код для преобразования пикселей в резервные копии.

P.S. В настоящее время я использую Windows 10 O/S.

Answer 1

На основании документации gulp-pxtorem, говорится:

Опции

Pass в двух объектов опционных. Первый один для postcss-pxtorem вариантов ...

После посещения документации для postcss-pxtorem, я обнаружил, что блок опций выглядит следующим образом:

{ 
    rootValue: 16, 
    unitPrecision: 5, 
    propWhiteList: ['font', 'font-size', 'line-height', 'letter-spacing'], 
    selectorBlackList: [], 
    replace: true, 
    mediaQuery: false, 
    minPixelValue: 0 
} 

Что говорит само за себя, но вы можете прочитать больше в документах, если вам нужно знать, что делает каждый вариант. Вы можете выбрать propWhiteList.

Таким образом, в вашем gulpfile:

var gulp = require('gulp'); 
var postcss = require('gulp-postcss'); 
var pxtorem = require('gulp-pxtorem'); 

gulp.task('css', function() { 
    var opts = { 
     propWhiteList: [ 
      'font-size', 
      'margin', 
      'padding', 
      'border', 
      'width', 
      'height', 
      ...etc 
     ] 
    }; 
    gulp.src('./css-1/*.css') 
     .pipe(pxtorem(opts)) 
     .pipe(gulp.dest('./dest')); 
}); 

Я не считаю, нужно использовать второй вариант, чтобы достичь желаемого результата.

Удачи и счастливого кодирования!